Bootstrap 3 Popover：在hover和点击时显示，也就是说。 固定一个弹出窗口

使用hover触发器显示弹出窗口工作正常。

使用单击触发器显示弹出窗口工作正常。

现在，如何在触发图像hover时显示弹出窗口，但如果用户单击图像，取消hover并启动单击切换？ 换句话说，hover显示弹出窗口并单击弹出窗口的“引脚”。

HTML非常标准：

User 

和popover初始化，更无聊：

 $(function () { $("[rel=popover]").popover(); }); 

从我到目前为止所看到的，似乎解决方案是一个很好的复杂的popover('show') ， popover('hide')和popover('toggle')调用，但我的javascript / jQuery-foo不能胜任这项任务。

编辑：

使用@hajpoj提供的代码作为基础，我添加了一个函数来监听hidden.bs.popover事件，尝试在触发click事件后重新启用hidden.bs.popover和mouseleave事件，但它确实使’hover’再次工作，它杀死了点击……

 var $btn2 = $('#btn2'); var enterShow = function() { $btn2.popover('show'); }; var exitHide = function() { $btn2.popover('hide'); } $btn2.popover({trigger: 'manual'}) .on('mouseenter', enterShow) .on('mouseleave', exitHide) .one('click', function() { $btn2.off('mouseenter', enterShow) .off('mouseleave', exitHide) .on('click', function() { $btn2.popover('toggle'); }); }); $('#btn2').on('hidden.bs.popover', function () { $btn2.on('mouseenter', enterShow) .on('mouseleave', exitHide) }); 

Answer 1

编辑：

根据您的评论，提供更新的解决方案。 它不会处于“单击”状态，而是返回到hover状态。

jsfiddle： http ： //jsfiddle.net/hajpoj/JJQS9/15/

HTML：

 Click to toggle popover 

JS：

 var $btn2 = $('#btn2'); $btn2.data('state', 'hover'); var enterShow = function () { if ($btn2.data('state') === 'hover') { $btn2.popover('show'); } }; var exitHide = function () { if ($btn2.data('state') === 'hover') { $btn2.popover('hide'); } }; var clickToggle = function () { if ($btn2.data('state') === 'hover') { $btn2.data('state', 'pinned'); } else { $btn2.data('state', 'hover') $btn.popover('hover'); } }; $btn2.popover({trigger: 'manual'}) .on('mouseenter', enterShow) .on('mouseleave', exitHide) .on('click', clickToggle); 

---

旧：

我相信这就是你要找的东西：

http://jsfiddle.net/JJQS9/1/

HTML：

 Click to toggle popover 

JS：

 var $btn2 = $('#btn2'); var enterShow = function() { $btn2.popover('show'); }; var exitHide = function() { $btn2.popover('hide'); } $btn2.popover({trigger: 'manual'}) .on('mouseenter', enterShow) .on('mouseleave', exitHide) .one('click', function() { $btn2.off('mouseenter', enterShow) .off('mouseleave', exitHide) .on('click', function() { $btn2.popover('toggle'); }); }); 

基本上你手动弹出/关闭mouseenter和mouseleave事件上的mouseenter ，但是一旦有人第一次点击popover，你就删除那些事件处理程序，并在click事件上添加一个新的处理程序来切换popover。

编辑：替代js代码。 更简单的代码，但是当你使用它时会有一个小的视觉效果： http ： //jsfiddle.net/hajpoj/r3Ckt/1/

 var $btn2 = $('#btn2'); $btn2.popover({trigger: 'hover'}) .one('click', function() { $btn2.popover('destroy') .popover({ trigger: 'click'}) .popover('show'); }); 

Answer 2

很简单，将hover添加到data-trigger ，如下所示：

Answer 3

这是一个混合的popover /工具提示，它可以为您提供正在寻找两种选项的function，在点击和hover时切换）：

混合弹出/工具提示小提琴

HTML：

 What's hidden? 

JS：

 var $tip1 = $('#tip1'); $tip1.tooltip({trigger: 'hover'}) .on('click', function() { $tip1.tooltip('toggle'); }); 

Answer 4

这是我使用Bootstrap和JQuery完成hover/引脚function的方式：

 $(function () { var clicked = false; var onLeave = function() { if (!clicked) { $(this).popover('hide'); } }; var onEnter = function () { if (!clicked) { $(this).popover('show'); } }; var clickToggle = function() { if (clicked) { $(this).popover('hide'); } clicked = !clicked; } $('.popover-div-class').popover({ trigger: "manual"}) .on('mouseenter', onEnter) .on('mouseleave', onLeave) .on('click', clickToggle); }); 

我不确定它是否适用于所有情况，但它在我的工作中有效。 向@hajpoj和@Trevor大肆宣传灵感。

JSFiddle： https ：//jsfiddle.net/5m2ob3yf/（不起作用，但你可以得到主旨）。