Bootstrap popover：当光标移出窗口时隐藏

Question

当用户将鼠标悬停在文本链接上时，我想显示一个包含多个按钮的弹出框

我遇到的问题是，当触发它的链接上的光标（例如，当用户移动以选择其中一个按钮时）时，我当前使用的默认 Bootstrap 弹出框被关闭

---

这个jsFiddle是我尝试做的一个例子。原理是：当链接（#example）悬停时显示弹出框，当弹出框（.popover）未悬停时隐藏弹出框。

但这不起作用，尽管我确信 BS 弹出框被封装在 .popover 类中（我使用 FF 开发调试工具检查）。

有趣的是：它可以与另一个 div 一起使用！如果我更换

$('.popover').mouseleave(function(){
    $('#example').popover('hide');
});

由此

$('.square').mouseleave(function(){
    $('#example').popover('hide');
});

当不再悬停蓝色方块时，弹出框确实被隐藏了。

为什么不能使用.popover？

Answer 1

当鼠标离开.popover-content 而不是.popover 时，您需要隐藏弹出框。而且.popover-content开头不存在所以需要将事件绑定到document

    $(document).on('mouseleave','.popover-content',function(){
        $('#example').popover('hide');
    });

http://jsfiddle.net/o4o9rrsq/2/