Tooltipster displays image as tooltip on second time hover

问题

When I try to hover over the image, tooltipster should display an image tooltip. But I can see tooltip image on second time hovering over. It doesn't work first time.

What could be the reason ?

$(document).ready(function() {

      $('.body_f').hover(function() {

          $($(this)).tooltipster({

            contentAsHTML: true,

            content: $('<img src="http://' + $(this).attr('alt') + '.jpg" />'),

          });

      });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.min.js"></script>

<img class="body_f" alt="clear" src="http://i.imgur.com/kl70A7M.jpg" alt="i.imgur.com/wttNDm6" />

回答1:

Able to load the images on first hover after replacing the Jquery code as below. But now the tooltip position starts over the underlying image, hiding it to some extent. On second hover onwards the position looks good. I have added offsetX:40 to unhide the underlying image on first hover. But second hover onwards tooltip shifts by 40. Not a good workaround. Original issue is solved.

$(document).ready(function() {

    $('.body_f').tooltipster({
                      contentAsHTML: true, 
                      position: 'top-left',
                      offsetX: 40,
                      functionBefore: function(origin, content) {
                         var data = '<img src="http://' + $(this).attr('alt') + '.jpg" />';

                         origin.tooltipster('content', $(data));

                         content();                     

                      }

                });
};

来源：https://stackoverflow.com/questions/28897699/tooltipster-displays-image-as-tooltip-on-second-time-hover