Gibt es ein Ereignis, wenn das title-Attribut den Tooltip anzeigt?

Question

Also, lassen Sie uns sagen, ich habe diese Spanne mit einem title Attribut:

<span title="Tooltip" id="mySpan">Span</span>

Dies zeigt der Tooltip ganz gut, aber ich möchte eine Art von Ereignis-Listener für, wenn das befestigen Der Titel wird entweder mit JavaScript oder JQuery angezeigt. z.B. so etwas wie (natürlich "title" ist kein gültiges Ereignis):

document.getElementById("mySpan").addEventListener("title", function() { 
    console.log("Tooltip shown"); 
}); 

---

Ich weiß, dass ich meine eigene Tooltip mit JavaScript und einer mouseover Veranstaltung wie diese schaffen könnte:

document.getElementById("mySpan").addEventListener("mouseover", function (event) { 
 
    console.log("Tooltip shown"); 
 
    document.getElementById("myTooltip").style.display = 'block'; 
 
    document.getElementById("myTooltip").style.top = (event.clientY + 5) + 'px'; 
 
    document.getElementById("myTooltip").style.left = (event.clientX + 5) + 'px'; 
 
}); 
 

 
document.getElementById("mySpan").addEventListener("mouseout", function() { 
 
    document.getElementById("myTooltip").style.display = 'none'; 
 
});

#myTooltip { 
 
    position: absolute; 
 
    background-color: lightgray; 
 
    padding: 2px 4px; 
 
    font-size: 10px; 
 
}

<span id="mySpan">Span</span> 
 
<span id="myTooltip" style="display: none;">Tooltip</span>

Aber das bedeutet, ich muss den Stil der title Attribut von Grund auf neu erstellen, die sich ändert von Browser zu Browser, und von OS zu OS, und ich würde wirklich nicht die Standard-Tooltip ändern, die der Benutzer gewohnt ist zu sehen.

---

So in der Zusammenfassung ist es möglich, eine Art von Ereignis-Listener zu befestigen, wenn die title Displays Attribut?

Answer 1

Haftungsausschluss verwenden: Dies ist nicht wirklich ein Ereignis-Listener.

Es ist nicht die beste Lösung, aber es funktioniert. Alles, was es tut, ist ein setTimeout für 0,5 s (das war auf Versuch und Irrtum basiert, konnte es in keiner docs finden) auf mouseover, und brechen Sie es ab, wenn Sie mouseout. Es funktioniert für mich, aber es funktioniert möglicherweise nicht, wenn sich die Verzögerung basierend auf dem Browser/OS ändert.

var titleShowTimeout; 
 
document.getElementById("mySpan").addEventListener("mouseover", function (event) { 
 
    titleShowTimeout = setTimeout(function() { 
 
     console.log("Tooltip shown"); 
 
    }, 500); 
 
}); 
 

 
document.getElementById("mySpan").addEventListener("mouseout", function() { 
 
    clearTimeout(titleShowTimeout); 
 
});

<span title="Tooltip" id="mySpan">Span</span>

Answer 2

Sie können jQuery-ui Tooltip Widget

$(document).tooltip(); 
 
$("#inputhelp").tooltip({ 
 
    open: function(event, ui) { 
 
    \t console.log('Text tooltip'); 
 
    } 
 
});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<p> 
 
    <a href="#" title="Anchor description">Anchor text</a> 
 
    <input id="inputhelp" title="Input help"> 
 
</p>