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

Question

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

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

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

但这不起作用，尽管我确定 BS popover 被封装在一个.popover类中（我使用 FF 开发调试工具进行了检查）。

有趣的是：它适用于另一个 div！如果我更换

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

这样

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

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

为什么不工作.popover？

Answer 1

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

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