Heim  >  Artikel  >  Web-Frontend  >  Wie werden Tooltips nur angezeigt, wenn der Text durch Auslassungspunkte abgeschnitten ist?

Wie werden Tooltips nur angezeigt, wenn der Text durch Auslassungspunkte abgeschnitten ist?

Linda Hamilton
Linda HamiltonOriginal
2024-11-07 11:50:03838Durchsuche

How to Display Tooltips Only When Text is Ellipsis-Truncated?

Anzeigen von Tooltips für durch Ellipsen abgeschnittenen Text

Beim Umgang mit dynamischen Seitenelementen, die ihren vorgesehenen Anzeigebereich möglicherweise überfüllen, fügen Sie Tooltips hinzu, um Kontext bereitzustellen wird wesentlich. In solchen Fällen ist es wünschenswert, Tooltips nur dann anzuzeigen, wenn die Auslassungspunkte (...) auf abgeschnittenen Inhalt hinweisen.

Berücksichtigen Sie das folgende HTML-Markup:

<code class="html"><span id="myId" class="my-class">...</span></code>

Mit CSS-Stil, der dies ermöglicht Auslassungspunkte für breiten Inhalt:

<code class="css">.my-class {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}</code>

Um diesem Element einen Tooltip hinzuzufügen, können wir das MouseEnter-Ereignis von jQuery nutzen, um zu prüfen, ob die Breite des Elements kleiner als seine Scrollbreite ist, was auf abgeschnittenen Inhalt hinweist. Erst dann legen wir das Titelattribut fest und stellen sicher, dass der Tooltip angezeigt wird, wenn die Auslassungspunkte ausgelöst werden:

<code class="javascript">$('.mightOverflow').bind('mouseenter', function(){
    var $this = $(this);

    if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
        $this.attr('title', $this.text());
    }
});</code>

Durch die Implementierung dieser Lösung werden Tooltips nur angezeigt, wenn der Inhalt überläuft und die Auslassungspunkte aktiviert werden, was wertvollen Kontext liefert dem Benutzer, ohne die Benutzeroberfläche zu überladen, wenn es unnötig ist.

Das obige ist der detaillierte Inhalt vonWie werden Tooltips nur angezeigt, wenn der Text durch Auslassungspunkte abgeschnitten ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn