如何让 jQuery UI 工具提示随着鼠标移动/位置而移动？

Question

jQuery Tools 工具提示对我来说没问题！

但我希望它随着鼠标移动而移动（相对于鼠标位置的工具提示）。我怎样才能做到这一点？或者有没有其他插件可以实现这个功能？

Answer 1

从版本 1.9 开始，

jQuery UI 现在包含一个

.tooltip()

小部件，并且它现在提供选项

track: true

以使工具提示跟随鼠标。只需在初始化小部件时将其指定为选项即可：

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

在此处查看实际操作：http://jqueryui.com/tooltip/#tracking

如果您已经在使用 jQuery UI 并且不想包含其他库，这非常有用。查看 API 以了解有关此小部件的更多详细信息：http://api.jqueryui.com/tooltip/

Answer 2

我使用 jQuery Tools 工具提示来完成此操作

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

其中 .tooltip 是 css 类

Answer 3

我认为使用 jQuery TOOLS 工具提示插件是不可能的。

Basistance Tooltip 插件 确实支持您想要的。使用

track: true

，如 此演示中所示：

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

---

如果您不喜欢该插件，qTip2还支持鼠标跟踪。请参阅 此演示（相当于 jsFiddle 此处）。

$('#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'
});

Answer 4

HTML

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

CSS（根据需要添加样式，在下面的脚本中我还将附加元素的类添加到工具提示 div 中）

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

JAVASCRIPT（jQuery，别忘了包含 jQuery 库，我也添加了 include 标签）

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

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

如果您使用 jquery-ui 工具提示，该代码片段就可以解决问题！