Question

我目前正在使用jquery的tipsy插件来显示轻量级工具提示。对于非嵌套元素，效果很好。

让我说我有：

<span>
    abc
    <span>def</span>
    ghi
</span>

我对每个span标记都有一个主权，当我尝试将鼠标悬停在内部span标记上时，我得到了奇怪的结果。我只希望它显示实际悬停的元素。没别了。

我该怎么做？

Answer 1

Tipsy被设计为一个开箱即用的简单插件。虽然有一些可配置的设置，但它们可能无法涵盖所有用例但是，它确实提供了一个api（$(el).tipsy(methodName)），它使它成为可扩展的东西通过使用它的api，您可以根据自己的规则强制执行行为（如show/hide）。

以下是我将如何编写此解决方法：

$('span')
    // init tipsy
    .tipsy({
        title : function(){
            return $(this).data('tipsy-title');
        }        
    })
   // overwrite the triggering logic
   .on('mousemove', function(e){
       // prevent the event from bubbling up
       e.stopPropagation();

       // force a hide on other targeted elements (suchas the span parent)
       $('span').not(this).tipsy('hide');

       // force a show on this element (such as thespan parent)
       $(this).tipsy('show');
    });

您可以通过clicking on this fiddle查看上述代码。

<强>更新
我已更新代码以便为您的html标记提供套件：

var $tips = $('.backref_hover')
       .tipsy()
       .on('mousemove', function(e){
           // prevent the event from bubbling up
           e.stopPropagation();

           // force a hide on other targeted elements (such as the span parent)
           $tips.not(this).trigger('mouseleave');

           // force a show on this element (such as thespan parent)
           $(this).tipsy('show');
        });

here是在线演示。

更新＃2 这是一个适用于动态添加跨度的演示：

$('.backref_hover').tipsy({live:true});

$('body').on('mousemove', '.backref_hover', function(e){
   // prevent the event from bubbling up
   e.stopPropagation();
   e.stopImmediatePropagation();

   // force a hide on other targeted elements (such as the span parent)
   $('.backref_hover').not(this).trigger('mouseleave');

   // force a show on this element (such as thespan parent)
   $(this).tipsy('show');
});

@林德里安：我在评论中说的是（取自jQuery docs）：

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。

此示例说明了如何使用on委派事件而不是live 也可以在行动here中看到。

Answer 2

如果您控制html，如何标记您想要工具提示的特定span？您可以使用class来执行此操作：

<span>
    [unknown number of spans]
    <span class="use-tooltip" title="Backreference x: y">def</span>
    [unknown number of close spans]
</span>

您的插件调用将是：

$('.use-tooltip').tipsy();

Answer 3

当我理解你的问题时，你可以通过修改tipsy插件来解决这个问题。您可以将自己的自定义选项添加到参数（例如hideParentTip: true），即：

$('span span').tipsy({hideParentTip: true});

然后你需要修改插件本身。在153行，您需要在function enter() {之后放置下一个代码，即：

function enter() {
    if (options.hideParentTip) $(this).parent().trigger(eventOut);

希望有所帮助。让我知道它是否会

Answer 4

嘿，你可以试试这样的东西..

$(function(){   
    $('body').children('span').tipsy( 
    });

看看它是否有效..我认为它将选择留下其子节点的所有span标签。

Answer 5

我使用了gion_13s解决方案一段时间。但事实证明，对更大的数据集上的浏览器/ cpu要求很高。基于他的代码，我想出了一个更好的解决方案：

    $('body').on('mousemove', '.backref_hover', function(e){
    // prevent the event from bubbling up
    e.stopPropagation();
    e.stopImmediatePropagation();

    // force a hide on other targeted elements (such as the span parent)
    $(this).parent().children('.backref_hover').not(this).trigger('mouseleave');

    // force a show on this element (such as thespan parent)
    $(this).tipsy('show');
});

jQuery悬停在堆叠元素上（带有'tipsy'）

5 个答案: