jquery tooltip / moves with mouse move / tooltip with mouse 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 in this way?

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

回答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/

回答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

回答4:

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>

回答5:

$(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!

来源：https://stackoverflow.com/questions/5795078/jquery-tooltip-moves-with-mouse-move-tooltip-with-mouse-position

标签

jquery

plugins

tooltip