Heim > Web-Frontend > CSS-Tutorial > Wie werden Tooltips nur angezeigt, wenn der Text mit Auslassungspunkten abgeschnitten ist?

Wie werden Tooltips nur angezeigt, wenn der Text mit Auslassungspunkten abgeschnitten ist?

Mary-Kate Olsen
Freigeben: 2024-11-06 21:02:02
Original
987 Leute haben es durchsucht

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

Tooltips werden nur angezeigt, wenn Ellipsen angewendet werden

Webentwickler stoßen oft auf Situationen, in denen dynamische Inhalte innerhalb einer festen Breite enthalten sein müssen, was zur Verwendung von Ellipsenstilen führt Schneiden Sie den Überlauf ab. In solchen Szenarien kann die Bereitstellung zusätzlicher Informationen durch Tooltips die Benutzererfahrung verbessern, es ist jedoch wünschenswert, den Tooltip nur anzuzeigen, wenn die Auslassungspunkte sichtbar sind.

Um dies zu erreichen, besteht ein Ansatz darin, JavaScript zu verwenden, um das Vorhandensein von Auslassungspunkten zu erkennen und fügen Sie den Tooltip-Inhalt nur dann dynamisch hinzu, wenn er anwendbar ist. Mithilfe der integrierten Ellipsenfunktion und jQuery erfüllt der folgende Code diese Aufgabe:

<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 verwendet das Mouseenter-Ereignis, um einen Hover-Handler an Elemente mit der Klasse mightOverflow zu binden. Innerhalb des Handlers prüft er, ob die Breite des Elements kleiner als seine Scrollbreite ist, was auf das Vorhandensein von Auslassungspunkten hinweist. Wenn dies der Fall ist und das Element noch kein Titelattribut hat, wird der Tooltip-Inhalt dynamisch hinzugefügt, wobei der Text des Elements als Tooltip-Inhalt verwendet wird.

Diese Technik stellt sicher, dass der Tooltip nur angezeigt wird, wenn die Auslassungspunkte sichtbar sind eine unaufdringliche und informative Erweiterung der Benutzeroberfläche.

Das obige ist der detaillierte Inhalt vonWie werden Tooltips nur angezeigt, wenn der Text mit Auslassungspunkten abgeschnitten 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