javascript-如何将Twitter Bootstrap Popover保持打开状态,直到鼠标移入它为止?

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

如何保持弹出窗口打开足够长的时间,以使鼠标能够移入弹出窗口? 然后,当鼠标移出链接和弹出窗口时,将其隐藏吗?

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

16个解决方案
31 votes

使用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()启动器覆盖模板。 我希望这有帮助。

marchello answered 2020-01-24T01:05:40Z
26 votes

仅添加到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);
});
Kevin Lawrence answered 2020-01-24T01:06:01Z
26 votes

Bootstrap 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的:

我希望将弹出框绑定到其父元素的每个元素上都运行2716068128030730721024循环。 在这种情况下,每个元素的类别为pop

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

CSS:

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

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

工作演示

Fizzix answered 2020-01-24T01:06:56Z
19 votes

这有点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帮助确保从触发链接到弹出窗口还有时间。

clem answered 2020-01-24T01:07:20Z
11 votes

引导github仓库中的这个问题解决了这个问题。 fat指出了实验性的“在顶部/底部/左侧/右侧”的位置。 它工作得很好,但是您必须确保popover触发器不是用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'});
});  
stevendaniels answered 2020-01-24T01:07:58Z
4 votes

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

有时,当将鼠标从弹出框触发器对角移动到实际的弹出框内容时,将鼠标悬停在下面的元素上。 我想处理这种情况–只要您在超时触发前到达弹出窗口内容,就可以保存(弹出窗口不会消失)。 它需要mouseleave选项。

此hack基本上会覆盖Popover mouseleave函数,但会调用原始函数(启动计时器以隐藏弹出窗口)。 然后,它将一次性监听器附加到mouseenter弹出内容元素。

如果鼠标进入弹出窗口,则清除计时器。 然后,它会在弹出窗口上侦听mouseleave,如果被触发,它将调用原始的离开函数,以便可以启动隐藏计时器。

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);
      });
    })
  }
};
Wojtek Kruszewski answered 2020-01-24T01:08:32Z
4 votes

解决方案对我们来说适用于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);
}); 
Opcrat answered 2020-01-24T01:08:52Z
1 votes

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

因此修复起来很容易,更改.prependTo(document.body)的内容:

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

并修复因更改而导致的位置问题。

某些使用链接老虎弹出框的链接也会导致弹出框的链接,因此添加一个跨度包含链接的链接就可以解决问题。

Tinyfool answered 2020-01-24T01:09:30Z
1 votes

这是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);
danielgatis answered 2020-01-24T01:09:50Z
1 votes

我尝试了@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
Micah Winkelspecht answered 2020-01-24T01:10:10Z
1 votes

这是我所做的:

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(),弹出窗口成为绑定了悬停事件的链接的一部分,因此当鼠标在其上移动时,使弹出窗口保持打开状态。

vinit answered 2020-01-24T01:10:39Z
1 votes

这对我来说适用于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();
});
ShogunPanda answered 2020-01-24T01:10:59Z
0 votes

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

Miika L. answered 2020-01-24T01:11:20Z
0 votes

我不喜欢找到的任何答案,因此我结合了一些答案,以编写以下代码。 每次您要创建“可固定”弹出式窗口时,它最终都只需要键入$(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'});
Timothy Zorn answered 2020-01-24T01:11:49Z
0 votes

看到所有答案后,我认为这样做会有所帮助。您可以管理所需的一切。许多答案并没有使我延迟显示。 在我的项目中,它的工作非常出色
/ ******/ ***************************************************** ************ /

<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); });
Ashaduzaman Bhuiyan answered 2020-01-24T01:12:18Z
0 votes

现在,我只是切换到webuiPopover,它可以正常工作。

Tinyfool answered 2020-01-24T01:12:38Z
translate from https://stackoverflow.com:/questions/7703878/how-can-i-hold-twitter-bootstrap-popover-open-until-my-mouse-moves-into-it