Wie kann ich einen Tooltip nur anzeigen, wenn die Auslassungspunkte in HTML aktiv sind?

Bestimmen der Auslassungspunkte-Aktivierung für die Tooltip-Anzeige

Wenn in HTML der Inhalt die angegebene Breite eines Elements überschreitet, können Auslassungspunkte (...) auftreten automatisch angewendet, was als Überlauftext gekennzeichnet ist, der abgeschnitten und durch drei Punkte ersetzt wird. In diesem Artikel wird erläutert, wie ein Tooltip nur angezeigt wird, wenn die Auslassungspunkte aktiv sind.

Hintergrund

Bedenken Sie das folgende HTML-Snippet:

<code class="html"><p>I have got a span with dynamic data in my page, with ellipsis style.</p>

<pre class="brush:php;toolbar:false">.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}

<span id="myId" class="my-class"></span>

document.getElementById('myId').innerText = "...";

In diesem Beispiel wird der Inhalt innerhalb des Bereichs „myId“ dynamisch aktualisiert und der Auslassungsstil wird aktiviert, wenn der Inhalt die angegebene Breite überschreitet.

Hinzufügen eines Tooltips

Um diesem Element einen Tooltip hinzuzufügen, können wir das Attribut „title“ verwenden:

<code class="html"><span id="myId" class="my-class" title="Full Content"></span></code>

Den Tooltip nur mit Auslassungspunkten anzeigen lassen

Wir möchten jedoch, dass der Tooltip nur angezeigt wird, wenn der Inhalt lang genug ist, um die Auslassungspunkte zu aktivieren. Um dies zu erreichen, können wir einen MouseEnter-Ereignis-Listener an das Element binden und das „title“-Attribut dynamisch hinzufügen:

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

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

In diesem JavaScript-Code prüfen wir, ob die Offset-Breite des Elements kleiner als seine Scroll-Breite ist , was darauf hinweist, dass der Inhalt überläuft. Wenn das Attribut „title“ noch nicht gesetzt ist, fügen wir dann den vollständigen Text des Elements als Tooltip hinzu. Dadurch wird sichergestellt, dass der Tooltip nur angezeigt wird, wenn die Auslassungspunkte aktiviert sind.

Das obige ist der detaillierte Inhalt vonWie kann ich einen Tooltip nur anzeigen, wenn die Auslassungspunkte in HTML aktiv sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!