jquery tooltip / moves with mouse move / tooltip with mouse position

Question

The jQuery Tools tooltip is ok for me!

But i want it to move with mouse move (tooltip relative to mouse position). How can i do that? Or is there any other plugin in this way?

Solution 1

I don't think it's possible to do with the jQuery TOOLS tooltip plugin.

The Bassistance Tooltip plugin does support what you want. Use track: true, as in this demo:

$('#yahoo a').tooltip({ 
    track: true, 
    delay: 0, 
    showURL: false, 
    showBody: " - ", 
    fade: 250 
});

---

If you don't like that plugin, qTip2 also supports mouse tracking. See this demo (equivalent jsFiddle here).

$('#demo-mouse').qtip({
    content: 'I position myself at the current mouse position',
    position: {
        my: 'top left',
        target: 'mouse',
        viewport: $(window), // Keep it on-screen at all times if possible
        adjust: {
            x: 10,  y: 10
        }
    },
    hide: {
        fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
    },
    style: 'ui-tooltip-shadow'
});

Solution 2

jQuery UI now includes a .tooltip() widget as of version 1.9, and it now provides the option track: true to make tooltips follow the mouse. Just specify it as an option when initializing the widget:

$( document ).tooltip({
    track: true
});

See this in action here: http://jqueryui.com/tooltip/#tracking

This is useful if you are already using jQuery UI and do not want to include another library. Check out the API for more details about this widget: http://api.jqueryui.com/tooltip/

Solution 3

I do this with jQuery Tools tooltip

$('#selector').mousemove(function(e) { 
  $('.tooltip').css('left', e.pageX + 5).css('top', e.pageY - 25).css('display', 'block');
})

where .tooltip is the css class

Comments

[theblang]

IMO, you should accept nullability's answer. The native jQuery tooltip has seen a lot of progress since this question was originally answered.

[theblang]

This should be the selected answer now. The native tooltip has seen a lot of progress since this question was originally answered.

[raphael]

See below for the most upvoted answer stackoverflow.com/a/15163105/4047679