1

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

可以说我有：

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

我在每个跨度标签上都有一个悬停事件，当我尝试将鼠标悬停在内部跨度标签上时，我得到了奇怪的结果。我只希望它显示实际悬停的元素。没有其他的。

我怎样才能做到这一点？

4

5 回答 5

4

Tipsy 被设计成一个开箱即用的简单插件。尽管有一些可配置的设置，但它们可能无法涵盖所有​​用例。
但是，它确实提供了一个 api ( $(el).tipsy(methodName))，这使它在某种程度上具有可扩展性。通过使用它的 api，您可以根据自己的规则
强制执行行为（例如 a ）。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');
    });​

您可以通过单击这个 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');
        });​

这是在线演示。

更新 #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');
});

@Lindrian：我在评论中所说的只是（取自jQuery 文档）：

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

这个例子说明了如何使用on委托事件而不是live.
也可以在这里看到行动。

于 2012-08-26T11:28:56.433 回答
1

如果您控制 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();
于 2012-08-26T18:03:01.177 回答
0

我使用了一段时间的 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');
});
于 2013-01-21T14:50:12.030 回答
0

据我了解您的问题，您可以通过修改 Tipsy 插件来解决此问题。您可以将自己的自定义选项添加到参数（例如hideParentTip: true），即：

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

然后你需要修改插件本身。就行了153，你需要在后面加上下一个代码function enter() {，即：

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

希望有帮助。让我知道如果它不会

于 2012-08-19T08:23:55.823 回答
0

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

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

看看它是否有效.. 我认为它会选择所有 span 标签留下它的 children 。

于 2012-08-26T18:10:20.100 回答