2

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?

1
  • 1
    IMO, you should accept nullability's answer. The native jQuery tooltip has seen a lot of progress since this question was originally answered.
    – theblang
    Apr 6, 2013 at 22:27

5 Answers 5

19

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/

1
  • 4
    This should be the selected answer now. The native tooltip has seen a lot of progress since this question was originally answered.
    – theblang
    Apr 6, 2013 at 22:26
2

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

0

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

HTML

<div id="tooltipWindow" class="tooltipContainer">
    <div></div>
</div>

CSS (Add styles as you want, in the script below I have also added the attached element's class to the tooltip div)

<style>
    .tooltipContainer {
        position: fixed;
        height: auto;
        width: auto;
        background: ghostwhite;
        padding: 10px;
    }
</style>

JAVASCRIPT (jQuery, dont forget to include the jQuery library, I have added the include tag as well)

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script>
    //Following Tooltip
    $('.elementClassName').mousemove(function(e) {
        if ($(this).attr('title') != "") {
            $('#tooltipWindow div').html($(this).attr('title'));
            $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class'));
            $('#tooltipWindow').show();
        }
    });
    $('.elementClassName').mouseleave(function (e) {
        $('#tooltipWindow').hide();
        });
    }

    //Non Following Tooltip
    $('.elementClassName').hover(function(e) {
        if ($(this).attr('title') != "") {
            $('#tooltipWindow div').html($(this).attr('title'));
            $('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class'));
            $('#tooltipWindow').show();
        }
    },function (e) {
        $('#tooltipWindow').hide();
        });
    }

</script>
0
 $(function(){
   window.onmousemove = function (e) {
     var tooltips = $('div.ui-tooltip');
     var x = (e.clientX + 10) + 'px',
        y = (e.clientY + 10) + 'px';
     for (var i = 0; i < tooltips.length; i++) {
       tooltips[i].style.top = y;
       tooltips[i].style.left = x;
    }
  };
});    

If you use jquery-ui tooltip, that code fragment will do the trick!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.