Update HTML title attribute on hover / async

Question

I have some rather expensive data to get for the content of many html "title" attributes on my webpage, so I want to load the data for this attribute only when the user requests it (on hover, for obvious reasons). I am able to set the title attribute fine on hover, but it does not appear correctly. Specifically, I must move the mouse pointer at least one pixel after the async call finishes before the text appears. I would like the text to appear as soon as the async call finishes (or at least, after the usual hover text delay if the async call finishes sooner)

$('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)    

});

(I cant find the runnable code button on this new question "wizard", so here is a jsfiddle: https://jsfiddle.net/76dk3snz/ )

I have also tried running other events like .trigger('mousemove') or mouseleave and mouseenter, etc, but nothing seems to trigger the desired behavior.

(That is, I would like the text to show up without the user having to move the mouse again)

Answer 1

In Chrome, you can set the title of the element before calling the expensive operation, and then the loading text will appear as a tooltip, and will be replaced with the real title once the response comes back:

 $('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> 

There doesn't seem to be a way to force the refresh of the title in Firefox, unfortunately - the mechanism is internal to the browser, and only affected by user-initiated mose events.