标题属性显示工具提示时是否有事件？

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 属性的样式，它会随着浏览器的不同而变化，从 OS 到 OS，我会真的不想改变用户习惯看到的标准工具提示。

因此，总而言之，是否可以在 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 上启动一个持续 0.5 秒的 setTimeout（基于反复试验，无法在任何文档中找到它），并在 mouseout 时取消它。它对我有用，但如果延迟根据浏览器/OS.

发生变化，它可能不起作用

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>

标题属性显示工具提示时是否有事件？

Is there an event for when the title attribute shows the tooltip?

html

javascript

jquery

tooltip

event-listener