如何在我的鼠标移动之前保持Twitter Bootstrap Popover打开？

Question

我有一个链接,使用Twitter Bootstrap Popover版本1.3.0来显示一些信息.此信息包含一个链接,但每次我将鼠标从链接移动到弹出窗口时,弹出窗口就会消失.

如何让弹出窗口打开足够长的时间以使鼠标移动到其中？然后当鼠标移出链接并弹出时,隐藏它？

或者是否有其他插件可以做到这一点？

Answer 1

使用bootstrap(使用版本2测试)我找到了以下代码:

$("a[rel=popover]")
            .popover({
                offset: 10,
                trigger: 'manual',
                animate: false,
                html: true,
                placement: 'left',
                template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'

            }).click(function(e) {
                e.preventDefault() ;
            }).mouseenter(function(e) {
                $(this).popover('show');
            });

重点是使用mouseleave()启用程序覆盖模板.我希望这有帮助.

Answer 2

只是为了添加Marchello的例子,如果你想让popover在用户将鼠标移离popover 和 source链接时消失,试试这个.

var timeoutObj;
$('.nav_item a').popover({
    offset: 10,
    trigger: 'manual',
    html: true,
    placement: 'right',
    template: '<div class="popover" onmouseover="clearTimeout(timeoutObj);$(this).mouseleave(function() {$(this).hide();});"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).mouseenter(function(e) {
    $(this).popover('show');
}).mouseleave(function(e) {
    var ref = $(this);
    timeoutObj = setTimeout(function(){
        ref.popover('hide');
    }, 50);
});

Answer 3

Bootstrap 3及以上版本

简单,只需使用该container选项并将其作为调用popover的元素.这样,popover就是调用它的元素的子元素.因此,您在技术上仍然悬停在父级上,因为子弹出属于它.

例如:

HTML:

<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>

jQuery的:

$.each()在我的每个元素上运行一个循环,我想要一个绑定到其父级的弹出窗口.在这种情况下,每个元素都具有类pop.

$('.pop').each(function () {
    var $elem = $(this);
    $elem.popover({
        placement: 'top',
        trigger: 'hover',
        html: true,
        container: $elem
    });
});

CSS:

此部分是可选的,但建议使用.它将弹出窗口向下移动7个像素,以便于访问.

.pop .popover {
    margin-top:7px;
}

工作演示

Answer 4

这有点hacky,但建立marchello的例子,我做了这个(不需要模板):

$(".trigger-link").popover({
  trigger: "manual",
}).on("click", function(e) {
  e.preventDefault();
}).on("mouseenter", function() {
  var _this = this;
  $(this).popover("show");
  $(this).siblings(".popover").on("mouseleave", function() {
    $(_this).popover('hide');
  });
}).on("mouseleave", function() {
  var _this = this;
  setTimeout(function() {
    if (!$(".popover:hover").length) {
      $(_this).popover("hide")
    }
  }, 100);
});

这setTimeout有助于确保从触发链接到弹出窗口的时间.

Answer 5

bootstrap github repo上的这个问题处理这个问题.胖指出实验"在上/下/左/右"的位置.它工作得很好,但你必须确保弹出触发器不是静态定位的css.否则,弹出框将不会出现在您想要的位置.

HTML:

<span class="myClass" data-content="lorem ipsum content" data-original-title="pop-title">Hover me to show a popover.</span>

CSS:

/*CSS */
.myClass{ position: relative;}

JS:

$(function(){
  $('.myClass').popover({placement: 'in top'});
});  

Answer 6

Bootstrap 3 的解决方案对我们有用。

var timeoutObj;
$('.list-group a').popover({
    offset: 10,
    trigger: 'manual',
    html: true,
    placement: 'right',
    template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide();});"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).mouseenter(function(e) {
    $(this).popover('show');
}).mouseleave(function(e) {
    var _this = this;
    setTimeout(function() {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 100);
}); 

Answer 7

现在我只是切换到 webuiPopover，它就可以工作了。