Bootstrap 3及以上

Question

我有一个使用Twitter Bootstrap Popover version 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 和源链接时消失，请尝试此操作。

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;
}

WORKING DEMO

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

This issue on the 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

这是我的看法：http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

有时将鼠标从弹出窗口触发器移动到实际的弹出式内容对角时，将鼠标悬停在下面的元素上。我想处理这种情况 - 只要你在超时触发之前到达弹出窗口内容，你就会保存（弹出窗口不会消失）。它需要delay选项。

这个hack基本上覆盖了Popover leave函数，但调用了原始函数（启动计时器来隐藏弹出窗口）。然后它将一次性监听器附加到mouseenter popover内容元素。

如果鼠标进入弹出框，则清除计时器。然后它会在popover上监听mouseleave，如果它被触发，它会调用原始的leave函数，以便它可以启动hide timer。

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover – call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};

Answer 7

解决方案适用于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 8

最后我解决了这个问题。 Popover消失是因为Popover不是链接的子节点，它是身体的子节点。

因此，修复它很容易，更改bootstrap-twipsy.js内容：

将.prependTo(document.body)更改为.prependTo(this.$element)

并通过更改修复位置问题。

和一些使用链接虎弹出也会导致链接弹出，所以添加一个包含链接，所以问题解决了。

Answer 9

这是Wojtek Kruszewski解决方案的一个版本。当鼠标返回触发时，此版本句柄弹出闪烁。 http://jsfiddle.net/danielgatis/QtcpD/

(function($) {
      var originalLeave = $.fn.popover.Constructor.prototype.leave;
      $.fn.popover.Constructor.prototype.leave = function(obj) {
        var self = (obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data("bs." + this.type));
        originalLeave.call(this, obj);
        if (obj.currentTarget) {
          var current = $(obj.currentTarget);
          var container = current.siblings(".popover");
          container.on("mouseenter", function() {
            clearTimeout(self.timeout);
          });
          container.on("mouseleave", function() {
            originalLeave.call(self, self);
          });
        }
      };

      var originalEnter = $.fn.popover.Constructor.prototype.enter;
      $.fn.popover.Constructor.prototype.enter = function(obj) {
        var self = (obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data("bs." + this.type));
        clearTimeout(self.timeout);
        if (!$(obj.currentTarget).siblings(".popover:visible").length) {
          originalEnter.call(this, obj);
        }
      };
    })(jQuery);

Answer 10

我尝试了@Wotjek Kruszewski和@danielgatis的解决方案，但都没有为我工作。警告：我使用的是Bootstrap v2.1.0，而不是v3。这个解决方案是在coffeescript中（为什么人们仍然使用普通的javascript？=））。

(($) ->
  originalLeave = $.fn.popover.Constructor::leave
  $.fn.popover.Constructor::leave = (e) ->
    self = $(e.currentTarget)[@type](@_options).data(@type)
    originalLeave.call @, e

    if e.currentTarget
      container = $(".popover")
      container.one "mouseenter", ->
        clearTimeout self.timeout

        container.one "mouseleave", ->
          originalLeave.call self, e
) jQuery

Answer 11

这就是我所做的：

e = $("a[rel=popover]")
e.popover({
    content: d, 
    html:true, 
    trigger:'hover',
    delay: {hide: 500},
    placement: 'bottom',
    container: e, 
})

这是对这个问题的一个非常简单和非常好的解决方案，我通过查看引导工具提示代码找到了。在Bootstrap v3.0.3中，这里是我注意到的代码行：

this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)

这表示如果定义了popover的container属性，那么popover将获取appendTo（）元素而不是insertAfter（）原始元素，您只需将元素作为容器属性传递即可。由于appendTo（），弹出窗口成为悬挂事件被绑定的链接的一部分，因此当鼠标在其上移动时保持弹出窗口打开。

Answer 12

这适用于 BootStrap 3 ：

el.popover({
  delay: {hide: 100}
}).on("shown.bs.popover", function(){
  el.data("bs.popover").tip().off("mouseleave").on("mouseleave", function(){
    setTimeout(function(){
      el.popover("hide");
    }, 100);
  });
}).on("hide.bs.popover", function(ev){
  if(el.data("bs.popover").tip().is(":hover"))
    ev.preventDefault();
});

Answer 13

在@stevendaniels链接的对话结束时，链接到Lee Carmichael称为BootstrapX - clickover的Twitter Bootstrap扩展。这会将弹出窗口从过大的工具提示更改为交互式控件，可以通过单击窗体上的其他位置，关闭按钮或超时后关闭它。它易于使用，并且非常适合我需要它的项目。可以找到它的一些使用示例here。

Answer 14

我不喜欢我找到的任何答案，所以我结合了一些接近的答案来制作以下代码。它允许您在每次想要制作'可固定'弹出框时只输入$(selector).pinnablepopover(options);。

使事情变得简单的代码：

$.fn.popoverHoverShow = function ()
{
    if(this.data('state') !== 'pinned')
    {
        if(!this.data('bs.popover').$tip || (this.data('bs.popover').$tip && this.data('bs.popover').$tip.is(':hidden')))
        {
            this.popover('show');
        }
    }
};
$.fn.popoverHoverHide = function ()
{
    if (this.data('state') !== 'pinned')
    {
        var ref = this;
        this.data('bs.popover').$tip.data('timeout', setTimeout(function(){ ref.popover('hide') }, 100))
        .on('mouseenter', function(){ clearTimeout($(this).data('timeout')) })
        .on('mouseleave', function(){ $(this).data('timeout', setTimeout(function(){ ref.popover('hide') }, 100)) });
        this.on('mouseenter', function(){ clearTimeout($(this).data('timeout')) });
    }
};
$.fn.popoverClickToggle = function ()
{
    if (this.data('state') !== 'pinned')
    {
        this.data('state', 'pinned');
    }
    else
    {
        this.data('state', 'hover')
    }
};
$.fn.pinnablepopover = function (options)
{
    options.trigger = manual;
    this.popover(options)
    .on('mouseenter', function(){ $(this).popoverHoverShow() })
    .on('mouseleave', function(){ $(this).popoverHoverHide() })
    .on('click', function(){ $(this).popoverClickToggle() });
};

使用示例：

$('[data-toggle=popover]').pinnablepopover({html: true, container: 'body'});

Answer 15

看到所有答案之后，我认为这将有所帮助。你可以管理你需要的一切。许多答案没有显示延迟我使用这个。它在我的项目中的工作非常好 / ****** / ******************* ************ /

/hadoop

/ ****************脚本代码******************请尽快使用听力****** /

<div class='thumbnail' data-original-title=''  style='width:50%'>    
 <div id='item_details' class='popper-content hide'>
    <div>
        <div style='height:10px'> </div>
        <div class='title'>Bad blood </div>
        <div class='catagory'>Music </div>
    </div>

  </div>
  HELLO POPOVER
</div>"

Answer 16

现在我只需切换到webuiPopover，它就可以了。

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

16 个答案:

Bootstrap 3及以上