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

Question

我有一些相当昂贵的数据来获取我网页上许多 html“标题”属性的内容，所以我只想在用户请求时加载此属性的数据（出于明显的原因，悬停时）。我可以在悬停时很好地设置标题属性，但它显示不正确。具体来说，我必须在异步调用完成后，在文本出现之前将鼠标指针移动至少一个像素。我希望在异步调用完成后立即显示文本（或者至少，如果异步调用更快完成，则在通常的悬停文本延迟之后）

$('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 事件影响。