Jquery tooltip is very jumpy

Question

I'm trying to use the jquery tooltip plugin to expand some image thumbnails, and show the full sized images when someone hovers over the thumbnails. However this is very jumpy, the tooltip jumps around 2-3 times before being fixed in one place even when the mouse stays static.

Why is that? Is there a way to fix it?

Html code:

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

Javascript:

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

Answer 1

I've used that same jQuery plug-in, but it was given me some problems with large amount of elements on the same page. After testing some, I've opted for this one:

You can see a working demo here!

And the web page link Here!

---

EDITED

As requested on the comments, here you have a jQuery extension based on the above plugin:

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

USAGE

$(document).ready(function(){
  $('.tooltipMe').tooltipImg();

  // with options
  $('.tooltipMe').tooltipImg({
    xOffset : 20,
    yOffset : 40,
    wrapper : 'myToolTipContainerClass'
  });
});

You can see this working Fiddle!

This Fiddle illustrates images from cross-domain, with relative path and from the img src.

Note that the relative path under Fiddle is buggy, sometimes you see it, other times you don't, but it works just fine!

Answer 2

I've seen this happen before - that's why I searched for a tooltip that is more flexible, easy-to-use, and easily integrated. I found a great tool through Listly - check out WalkMe.com. I think you'll find the results very pleasing. Let me know how the images work out.

Answer 3

I found a solution on the jquery forum. Just remove show and hide effects like this:

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

Answer 4

In writing my own simple toolTip, I found that when I appended my tooltip to an non-body element. It was jumpy or jittery between hiding/showing of the toolTip when in IE7, IE8, and IE9.

For example, I had $('li').append(toolTip html..) which results in jittery or jumpy hide/show of toolTip. Was not jumpy or jittery in firefox, Chrome, and Safari. Not fine in IE7, IE8, and IE9.

When I switch to $('body').append(toolTip html..), it displays as expected for IE 7, IE8, and IE9, and it still works fine in firefox, Chrome, and Safari.