jquerypluginstooltip

How to make jQuery UI tooltips move with the mouse move/position?


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 for this?


Solution

  • 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'
    });