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

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!