使Bootstrap Popover可点击/ SetTimeout使用

Question

我试图让bootstrap的'popover'可点击，因为当我将鼠标悬停在其中时，它仍然保持打开状态。

我设法使用这个脚本http://jsfiddle.net/CtuRx/5/得到这个工作。

但是当我通过jslint运行它时，它抱怨settimeout在它被定义之前被使用。

想知道是否有人可以提供/解释更好的解决方案来创建和使用一个函数 - 在原始.btn类和.popover的mouseleave上定义和调用settimeout延迟。

谢谢！

Answer 1

Here's an alternate solution。

我用div封装了你的按钮。

当鼠标进入包装div时，它会显示弹出窗口并展开自身以为鼠标提供一个桥接，以便在不触发鼠标离开的情况下输入弹出窗口。我们还在popover上放置了一个mouseleave，以便当我们离开popover时，wrapper div返回到默认宽度。

links.mouseenter(function (event) { 

    var link = $(this); 
    link.popover('show').width(180); 

    $('.popover').mouseleave(function() { 
     link.popover('hide').width(defaultWidth); 
    }); 
}); 

当鼠标离开按钮，进入桥到酥料饼，我注意到在包装MouseLeave事件触发由于事件的冒泡。下面的代码通过忽略鼠标事件来解决这个问题，除非我们将包装器退出到主体。

links.mouseleave(function (event) { 
    if (event.toElement === document.body) { 
     $(this).popover('hide').width(defaultWidth); 
    }   
}); 

尝试向包装div添加边框以查看实际的代码。也。你应该考虑将你的CSS分隔开来，使它更具可读性。