Javascript Jquery工具提示非常令人紧张

我试图使用jquery工具提示插件来展开一些图像缩略图，并在有人悬停在缩略图上时显示完整大小的图像。然而，这是非常跳跃的，即使鼠标保持静止，工具提示在固定在一个位置之前也会跳跃2-3次

为什么呢？有办法解决吗

Html代码：

<ul class="gallery" id="gallery">
    <li>
            <img src="<?=site_url('images/Balloon Fest..jpg');?>" class="galleryImg" />
    </li>
</ul>

“class=”galleryImg“/>

Javascript:

$(".galleryImg").tooltip({
            delay: 0,
            showURL: false,
            bodyHandler: function() {
                return $("<img/>").attr("src", this.src)
                    .attr('width', 300).attr('height', 300);
            }
        });

$（.gallerymg”）。工具提示({
延迟：0，
showURL:false，
bodyHandler:function（）{
return$（“我使用了同一个jQuery插件，但在同一页面上的大量元素给了我一些问题。在测试了一些之后，我选择了这个：

您可以看到正在工作的

和网页链接


编辑
根据评论的要求，这里有一个基于上述插件的jQuery扩展：

JQUERY

(function($) {
  $.fn.tooltipImg = function(options) {

    // options    
    var opts = $.extend({}, $.fn.tooltipImg.defaults, options);

    // when the mouse gets over the element
    $(this).hover(function(e){

      this.t = this.alt;

      var c   = (this.t != "") ? "<br/>" + this.t : "",
          src = ($(this).data("src")!='') ? $(this).data("src") : this.src,
          res = '<p class="'+opts.wrapper+'"><img src="'+src+'" alt="Image preview" />'+c+'<p>';

      $("body").append(res);

      $("."+opts.wrapper)
        .css({
          "top"  : (e.pageY - opts.xOffset) + "px",
          "left" : (e.pageX + opts.yOffset) + "px"
        })
        .fadeIn("fast");                      
      },
      function(){
        $("."+opts.wrapper).remove();
      });

      // when the mouse moves while over the element
      $(this).mousemove(function(e){
        $("."+opts.wrapper)
          .css({
            "top"  : (e.pageY - opts.xOffset) + "px",
            "left" : (e.pageX + opts.yOffset) + "px"
          });
      });

  }

  // options defaults
  $.fn.tooltipImg.defaults = {
    xOffset : 10,
    yOffset : 30,
    wrapper : 'myTooltipImgWindow'
  }

})(jQuery);

你可以看到这个

这把小提琴用相对路径和
img
src
显示了来自跨域的图像

请注意，Fiddle下的相对路径有问题，有时你会看到，有时你看不到，但它工作得很好！
我使用了同一个jQuery插件，但在同一页面上有大量元素时给了我一些问题。在测试了一些之后，我选择了这个：

您可以看到正在工作的

和网页链接


编辑
根据评论的要求，这里有一个基于上述插件的jQuery扩展：

JQUERY

(function($) {
  $.fn.tooltipImg = function(options) {

    // options    
    var opts = $.extend({}, $.fn.tooltipImg.defaults, options);

    // when the mouse gets over the element
    $(this).hover(function(e){

      this.t = this.alt;

      var c   = (this.t != "") ? "<br/>" + this.t : "",
          src = ($(this).data("src")!='') ? $(this).data("src") : this.src,
          res = '<p class="'+opts.wrapper+'"><img src="'+src+'" alt="Image preview" />'+c+'<p>';

      $("body").append(res);

      $("."+opts.wrapper)
        .css({
          "top"  : (e.pageY - opts.xOffset) + "px",
          "left" : (e.pageX + opts.yOffset) + "px"
        })
        .fadeIn("fast");                      
      },
      function(){
        $("."+opts.wrapper).remove();
      });

      // when the mouse moves while over the element
      $(this).mousemove(function(e){
        $("."+opts.wrapper)
          .css({
            "top"  : (e.pageY - opts.xOffset) + "px",
            "left" : (e.pageX + opts.yOffset) + "px"
          });
      });

  }

  // options defaults
  $.fn.tooltipImg.defaults = {
    xOffset : 10,
    yOffset : 30,
    wrapper : 'myTooltipImgWindow'
  }

})(jQuery);

你可以看到这个

这把小提琴用相对路径和
img
src
显示了来自跨域的图像

请注意，Fiddle下的相对路径有问题，有时您会看到，有时您不会看到，但效果很好！
我以前见过这种情况-这就是为什么我搜索更灵活、易于使用且易于集成的工具提示的原因。我通过Listly找到了一个很棒的工具-请查看WalkMe.com。我想您会发现结果是正确的我很高兴。让我知道图像是如何工作的。
我以前见过这种情况-这就是为什么我搜索了一个更灵活、易于使用、易于集成的工具提示。我通过Listly找到了一个很棒的工具-查看WalkMe.com。我想你会发现结果非常令人高兴。让我知道图像是如何工作的。
在写我自己的文章时简单的工具提示，当我将工具提示附加到一个非实体元素时，我发现它在IE7、IE8和IE9中隐藏/显示工具提示时会出现跳跃或抖动

例如，我有
$（'li'）.append（TooltipHTML..）
，这会导致工具提示的不稳定或不稳定隐藏/显示。在firefox、Chrome和Safari中不稳定或不稳定。在IE7、IE8和IE9中不稳定

当我切换到
$（'body'）.append（工具提示html..）
，它在IE 7、IE8和IE9中的显示与预期的一样，在firefox、Chrome和Safari中仍然可以正常工作。
在编写我自己的简单工具提示时，我发现当我将工具提示附加到一个非主体元素时。在IE7、IE8和IE9中隐藏/显示工具提示时，会出现跳跃或抖动

例如，我有
$（'li'）.append（TooltipHTML..）
，这会导致工具提示的不稳定或不稳定隐藏/显示。在firefox、Chrome和Safari中不稳定或不稳定。在IE7、IE8和IE9中不稳定

当我切换到
$（'body'）.append（工具提示html..）
时，它的显示与IE 7、IE8和IE9的预期一样，在firefox、Chrome和Safari中仍然可以正常工作。
我在jquery论坛上找到了一个解决方案。
只需删除显示和隐藏效果，如下所示：

jQuery('#myelement').tooltip({
    show: false,
    hide: false
});

我在jquery论坛上找到了一个解决方案。
只需删除显示和隐藏效果，如下所示：

jQuery('#myelement').tooltip({
    show: false,
    hide: false
});

@RicardoLohmann你能展示你的代码吗？@RicardoLohmann编辑了一个问题来添加它你是否特别需要使用这个插件？（我问这个问题是因为我以前用过它，最后选择了另一个来解决类似的问题）@Zuul不，我可以使用另一个，只要它可以显示图像和文本，请建议任何替代方案，如果它有效，我会接受答案。@RicardoLohmann你能显示你的代码吗？@RicardoLohmann编辑问题添加它你特别需要使用那个插件吗？（我这样问是因为我过去用过它，最后选择了另一个来解决类似的问题）@Zuul不，我可以使用另一个，只要它可以显示图像和文本，请建议任何替代方案，如果它有效，我会接受答案。谢谢。但是如果你能修改这个，那么我可以这样做：
$（.myClass”）。工具提示（“”；
或
$（“.myClass”）.工具提示（“某些文本..
”）；
？是的，我可以。我有我的自定义答案，我会更新我的答案！根据建议的插件使用jQuery扩展更新了答案。底部有一个工作示例！谢谢。但是如果您可以修改这个，那么我可以做如下操作：
$(“.myClass”）.tooltip（“”；
或
$（“.myClass”）.tooltip（“一些文本..
”）；
”？是的，我可以。我有自定义的，我会更新我的答案！根据建议的插件使用jQuery扩展更新答案。底部有一个小提琴，上面有一个工作示例！