在悬停/异步时更新HTML标题属性

Question

我要从网页上获取许多html“ title”属性的内容，因此需要一些相当昂贵的数据，因此我只想在用户要求时（出于明显的原因，悬停）才加载该属性的数据。 我可以在悬停时将title属性设置为正常，但显示不正确。 具体来说，我必须在异步调用结束后将鼠标指针至少移动一个像素，然后再显示文本。 我希望文本在异步调用结束后立即显示（或者至少在通常的悬停文本延迟之后，如果异步调用结束在以后）

$('body').on('mouseenter', '.thumbnail', function(){
    var self = $(this);

    setTimeout(function(){
        var titleStr = "yay, a new title";

        self.attr('title', titleStr)
      $('#status').text("title set!")
    }, 1000)    

});

（我在这个新问题“向导”上找不到可运行的代码按钮，所以这是一个jsfiddle： https ://jsfiddle.net/76dk3snz/）

我也尝试过运行其他事件，例如.trigger（'mousemove'）或mouseleave和mouseenter等，但似乎没有任何事情可以触发所需的行为。

（也就是说，我希望文本显示出来而无需用户再次移动鼠标）

Answer 1

在Chrome中，您可以在调用昂贵的操作之前设置元素的标题，然后加载的文本将显示为工具提示，并在返回响应后将其替换为真实的标题：

 $('body').on('mouseenter', '.thumbnail', function() { var self = $(this); self.attr('title', 'Loading...') setTimeout(function() { var titleStr = "yay, a new title"; self.prop('title', titleStr) $('#status').text("title set!") }, 1000) }); 

 .thumbnail { width: 100px; height: 100px; background-color: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="thumbnail"> </div> <div id="status"> </div> 

不幸的是，似乎没有一种方法可以强制刷新Firefox中的title ，该机制是浏览器内部的，仅受用户启动的mose事件影响。