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 工具提示小工具

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

免责声明：这实际上并不是一个事件监听器。

它不是最好的解决方案，但它有效。它只是在setTimeout上开始mouseover 0.5秒（基于反复试验，无法在任何文档中找到它），并在mouseout时取消它}。它适用于我，但如果延迟根据浏览器/操作系统而改变，它可能无效。

＆＃13;

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);
});

＆＃13;

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

＆＃13;

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

2 个答案: