jquery - Tooltipster 在第二次悬停时将图像显示为工具提示

Question

当我尝试将鼠标悬停在图像上时，工具提示器应显示图像工具提示。但我可以在第二次悬停时看到工具提示图像。它第一次不起作用。

可能是什么原因 ？

$(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" />

Answer 1

如下替换 Jquery 代码后，能够在第一次悬停时加载图像。但是现在工具提示的位置从底层图像开始，在某种程度上隐藏了它。在第二次悬停时，该位置看起来不错。我添加了 offsetX:40 以在第一次悬停时取消隐藏底层图像。但是第二次悬停向前工具提示会移动 40。这不是一个好的解决方法。原来的问题解决了。

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

                      }

                });
};