工具提示器在第二次悬停时将图像显示为工具提示 [英] 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.

可能是什么原因?

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

推荐答案

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

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

                      }

                });
};

这篇关于工具提示器在第二次悬停时将图像显示为工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！