jquery工具提示/随鼠标移动移动/随鼠标位置移动的工具提示

Question

jQuery Tools tooltip对我来说没问题！

但我希望它随着鼠标的移动而移动(相对于鼠标位置的工具提示)。我该怎么做呢？或者有没有其他插件可以这样做呢？

Answer 1

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

Bassistance Tooltip plugin确实支持您想要的功能。像在this demo中一样使用track: true

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

如果你不喜欢这个插件，qTip2也支持鼠标跟踪。请参见this demo (等效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'
});

Answer 2

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

我使用jQuery Tools工具提示执行此操作

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

其中.tooltip是css类。