Heim > Web-Frontend > CSS-Tutorial > Wie werden Tooltips nur angezeigt, wenn der Text in HTML ellipsenförmig ist?

Wie werden Tooltips nur angezeigt, wenn der Text in HTML ellipsenförmig ist?

Susan Sarandon
Freigeben: 2024-11-05 21:06:03
Original
411 Leute haben es durchsucht

How to Display Tooltips Only When Text is Ellipsized in HTML?

Tooltips werden nur angezeigt, wenn die Auslassungspunkte aktiviert sind

Wenn in HTML der Text die angegebene Breite überschreitet, wird er mit Auslassungspunkten ("...") abgeschnitten. Dies kann erreicht werden, indem die Textüberlaufeigenschaft auf Auslassungspunkte gesetzt wird. Es fehlt jedoch die Browserunterstützung zum Erkennen, wann Auslassungspunkte angewendet werden.

Benutzerdefinierte Ereignisbehandlung mit JavaScript

Um dieses Verhalten zu simulieren und Tooltips nur dann anzuzeigen, wenn Auslassungspunkte vorhanden sind, gehen Sie wie folgt vor ein JavaScript-Ansatz:

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

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

Dieser Code bindet das MouseEnter-Ereignis an Elemente, die überlaufen können. Es prüft, ob die sichtbare Breite (offsetWidth) des Elements kleiner ist als seine tatsächliche Inhaltsbreite (scrollWidth) und ob es kein Titelattribut hat. Wenn diese Bedingungen erfüllt sind, wird das Titelattribut auf den Textinhalt des Elements gesetzt.

Mit dieser Technik können Sie Tooltips nur anzeigen, wenn die Auslassungspunkte aktiviert sind, ohne auf bestimmte Browserereignisse angewiesen zu sein.

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

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage