我有一个 html 元素，（为了简单起见）一个标签，它有一个标题，因此当您将鼠标悬停在标签上时会出现一个工具提示。
我希望工具提示显示一些相关“当前”数据的快照。实际上，标签指向的对象的当前价格，但类似的可能是任何可能随时间变化的数据。
在原生 JavaScript 中，如何检测工具提示的激活，以便在显示工具提示之前重新计算数据？
我知道我可以使用 setInterval() 或其他方法使标题字符串保持最新状态，但仅在显示工具提示时重新计算标题字符串会更有效。
【问题讨论】：
mouseenter、setInterval() 和mouseleave 的组合。
html、js、css 吗？ ，创建stacksn-ps来演示？
标签： javascript tooltip title
尝试使用元素的data-*属性来存储值，将元素的element.title设置为data-*，onmouseover，onmouseleave事件
var elem = document.querySelector("div");
var interval = setInterval(function() {
elem.dataset.tooltip = 1+ +elem.dataset.tooltip;
}, 1000);
elem.onmouseover = elem.onmouseleave = function(e) {
console.log(e)
this.title = this.dataset.tooltip;
}<div data-tooltip="0" title="0">hover</div>【讨论】：
这样的事情可能会奏效，但您将受制于更新数据请求的延迟（假设更新价格数据的来源是 http 请求或套接字连接），这可能不会t 比浏览器显示工具提示要快。它肯定不会是一致的或可靠的。
<p id="text" title="initialtitle">Text</p>
<script>
var n = 0;
document.getElementById("text");
text.onmouseover = function() {
n++;
text.title = n;
};
</script>
根据您正在做什么的具体情况以及您有多少回旋余地，另一种解决方案可能是打开一个 WebSocket 到服务器，然后当它发生变化时使用更新的价格信息更新所有客户端。这样数据就可以尽可能快地发送到客户端，而无需持续的 http 轮询，并且不需要计时器。
当然，如果数据源是 JavaScript 本身内的计算，而无需从服务器获取信息，那么只需根据您的需要修改上述内容即可。
【讨论】：
我认为这段代码对你有帮助
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="test" id="test" onChange="setTitle(this)" title="testing...">Test1</div>
<script type="text/javascript">
$('#test').bind("DOMSubtreeModified",function(){
$('#test').attr('title',$('#test').html());
});
// Run below code in your console to change your div value
//$(".test").html("test2");
</script>
首先在您的浏览器中运行上述代码。并检查工具提示将是“测试...”。 然后运行
$(".test").html("test2");
在您的浏览器控制台中更改您的 div html，然后再次检查您的工具提示。您将看到 div 的确切文本。
【讨论】：