jQuery Tipsy 工具提示插件定制

Question

我正在使用 jQuery 插件 tipsy当鼠标悬停在特定元素上时激活工具提示。目前，工具提示出现在触发它的元素的中间，但我想自定义插件，以便工具提示出现在相应的标题上方。看看我在下面链接的示例。当整个 #everything div 悬停在上方时会触发工具提示，这是正确的，但我希望工具提示显示在标题上方。

示例:http://jsfiddle.net/JqFwP/2/

如果您需要更多信息或进一步解释我想要实现的目标，请告诉我。

谢谢。

Answer 1

我不熟悉 Tipsy 插件，但是将 mouseenter 事件链接到 #everything 怎么样？

JavaScript:

$("#everything").tipsy({
    gravity: 's'
}).mouseenter(function(){
    var top=$(this).find('h2').offset().top - 35,
        left=$(this).find('h2').offset().left - 10;
    $('.tipsy').css({
        'top': top + 'px',
        'left': left + 'px'
    });
});

演示(单标题):http://jsfiddle.net/dirtyd77/JqFwP/16/

演示(多个标题):http://jsfiddle.net/dirtyd77/JqFwP/17/

恕我直言，我建议您使用 jQueryUI's tooltip反而。我感觉这样会更有利。只是一个想法!如果您有任何疑问，请告诉我!