当title属性显示工具提示时是否发生事件？

Question

因此，假设我有一个带有title属性的跨度：

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

这显示工具提示很好，但是当标题使用JavaScript或JQuery显示时，我想附加某种事件侦听器。 例如，类似的东西（显然"title"不是有效事件）：

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

---

我知道我可以使用JavaScript和如下mouseover事件创建自己的工具提示：

 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> 

但这意味着我必须从头开始重新创建title属性的样式，该属性随浏览器的不同而不同，并且随操作系统的不同而改变，而我确实宁愿不更改用户过去经常看到的标准工具提示。

---

因此，总而言之，是否可以在title属性显示时附加某种事件侦听器？

Answer 1

您可以使用jQuery-ui 工具提示小部件

 $( document ).tooltip(); $("#inputhelp").tooltip({ open: function( event, ui ) { 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> 

Answer 2

免责声明：这实际上不是事件侦听器。

这不是最大的解决方案，但可以。 它所做的只是在mouseover上启动setTimeout 0.5s（基于反复试验，在任何文档中都找不到），并在mouseout时取消它。 它对我有用，但是如果延迟根据浏览器/操作系统而变化，则可能不起作用。

 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>