javascript - 如何在鼠标移入之前保持 Twitter Bootstrap Popover 打开？

Question

我有一个使用Twitter Bootstrap Popover 1.3.0 版的链接来显示一些信息。此信息包括一个链接，但每次我将鼠标从链接移到弹出框时，弹出框就会消失。

如何保持弹出窗口足够长的时间以使鼠标能够移动到其中？那么当鼠标移出链接并弹出时，隐藏它？

还是有其他插件可以做到这一点？

score 31 · Accepted Answer

使用引导程序（使用版本 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() 启用程序覆盖模板。我希望这有帮助。

score 28 · Accepted Answer

引导程序 3 及更高版本

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

例如：

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

工作演示

score 26 · Accepted Answer

只是添加到 Marchello 的示例中，如果您希望在用户将鼠标从弹出框和源链接上移开时弹出框消失，请尝试一下。

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

score 19 · Accepted Answer

这有点 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有助于确保有时间从触发链接移动到弹出框。

score 11 · Accepted Answer

bootstrap github repo 上的这个问题处理了这个问题。fat 指出了实验性的“上/下/左/右”位置。它工作得很好，但你必须确保弹出框触发器不是用 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'});
});

score 4 · Accepted Answer

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

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

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

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

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

score 4 · Accepted Answer

解决方案对我们适用于 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);
});

score 1 · Accepted Answer

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

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

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

并解决变化引起的位置问题。

还有一些使用链接老虎弹出框也会导致带有链接的弹出框，所以添加一个跨度包含链接，这样问题就解决了。

score 1 · Accepted Answer

这是 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);

score 1 · Accepted Answer

我尝试了@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

score 1 · Accepted Answer

这是我所做的：

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)

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

score 1 · Accepted Answer

这在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();
});

score 0 · Accepted Answer

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

score 0 · Accepted Answer

我不喜欢我找到的任何答案，所以我结合了一些接近的答案来制作以下代码。$(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'});

score 0 · Accepted Answer

在看到我所做的所有答案后，我认为这会有所帮助。您可以管理所需的一切。许多答案不会使我使用它的显示延迟。它在我的项目中工作得很好
/****** /**************************************** ******************************/

<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>"

/****************脚本代码 ****************** 请从听到使用 ******/

$(".thumbnail").popover({
trigger: "manual" ,
html: true,
animation:true,
container: 'body',
placement: 'auto right',
content: function () {
    return $(this).children('.popper-content').html();
}}) .on("mouseenter", function () {
var _this = this;

$('.thumbnail').each(function () {
    $(this).popover('hide');
});
setTimeout(function(){
    if ($(_this).is(':hover')) {
        $(_this).popover("show");
    }
},1000);
$(".popover").on("mouseleave", function () {
    $('.thumbnail').each(function () {
        $(this).popover('hide');
    });
    $(_this).popover('hide');
 }); }).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 100); });

score -1 · Accepted Answer

-1

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

于 2017-02-15T07:59:51.323 回答

javascript - 如何在鼠标移入之前保持 Twitter Bootstrap Popover 打开？

16 回答 16

引导程序 3 及更高版本

Related

Reference