JavaScript，如何在不轮询的情况下在工具提示中显示 'current' 数据？

Question

我有一个 html 元素，（为简单起见）一个标签，它有一个标题，因此当您将鼠标悬停在标签上时会出现一个工具提示。

我希望工具提示显示一些相关 'current' 数据的快照。实际上，标签指向的 object 的当前价格，但与此类似的可能是任何可能随时间变化的数据。

在本机 JavaScript 中，如何检测工具提示的激活，以便我可以 re-calc 显示工具提示之前的数据？

我知道我可以使用 setInterval() 或其他方法来使标题字符串保持最新状态，但仅在显示工具提示时 re-calc对标题字符串进行修改会更有效。

Answer 1

尝试使用元素的 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>

Answer 2

我觉得这段代码对你有帮助

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

首先运行以上代码在您的浏览器中。检查工具提示将为 'testing...'。然后运行

$(".test").html("test2");

在您的浏览器控制台中更改您的 div html，然后再次检查您的工具提示。您将看到 div.

的确切文本

Answer 3

这样的方法可能有效，但您将受制于更新数据请求的延迟（假设更新价格数据的来源是 http 请求或套接字连接）并且可能不会比浏览器显示工具提示更快。它肯定不会一致或可靠。

<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 本身的计算，而无需从服务器获取信息，那么只需根据您的需要修改上述内容即可。

Here's a jsfiddle to play around with.

JavaScript，如何在不轮询的情况下在工具提示中显示 'current' 数据？

JavaScript, How to show 'current' data in a tooltip without polling?

javascript

tooltip

title