Javascript 我如何保持Twitter引导弹出窗口打开，直到我的鼠标移动到它？

我有一个链接，它使用来显示一些信息。此信息包含一个链接，但每次我将鼠标从链接移动到popover时，popover就会消失

我怎样才能保持popover打开足够长的时间，使鼠标能够进入它？那么，当鼠标移出链接和弹出框时，是否将其隐藏

---

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

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

所以修复它很容易，更改

bootstrap twipsy.js

内容：

将

.prependTo（document.body）

更改为

.prependTo（this.$元素）

并修复由变更引起的位置问题

有些人使用link-tiger-popover也会导致带有link的poover，因此添加一个span-contain链接，问题就解决了。

使用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');
            });

$（“a[rel=popover]”）
波弗先生({
抵销：10，
触发器：“手动”，
动画：假，
是的，
位置：'左'，
模板：'
'
})。单击（功能（e）{
e、 预防默认值（）；
}).mouseenter（函数（e）{
$（this.popover（'show'）；
});

要点是使用mouseleave（）启用码覆盖模板。我希望这能有所帮助。

回购协议解决了这个问题。fat指出了实验性的“上/下/左/右”位置。它工作得很好，但是您必须确保popover触发器不是使用css静态定位的。否则，popover将不会显示在您希望的位置

HTML:

将鼠标悬停在我身上以显示一个popover。

CSS:

JS:

---

在@Stevendianiels链接的对话末尾，有一个链接指向一个名为Lee Carmichael的Twitter引导扩展。这会将弹出窗口从过大的工具提示更改为交互式控件，可以通过单击窗体上的其他位置、关闭按钮或在超时后关闭该控件。它很容易使用，对于我需要它的项目来说效果很好。可以找到它的一些用法示例。

为了补充Marchello的示例，如果用户将鼠标移离popover和源链接，您希望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);
});

var timeoutObj；
$（'.nav_项目a'）.popover({
抵销：10，
触发器：“手动”，
是的，
位置：'对'，
模板：'
'
}).mouseenter（函数（e）{
$（this.popover（'show'）；
}).mouseleave（功能（e）{
var ref=$（此）；
timeoutObj=setTimeout（函数（）{
参考popover（“隐藏”）；
}, 50);
});

这有点老套，但以marchello的例子为基础，我这样做了（不需要模板）：

setTimeout

有助于确保有时间从触发链接移动到popover。

以下是我的观点：

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

延迟

选项

这种攻击基本上覆盖了Popover

leave

函数，但调用了原始函数（启动计时器隐藏Popover）。然后它将一个一次性侦听器附加到

mouseenter

popover内容元素

如果鼠标进入弹出框，计时器将被清除。然后它会在popover上监听

mouseleave

，如果它被触发，它会调用原始的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);
      });
    })
  }
};

---

这是Wojtek Kruszewski解决方案的一个版本。此版本处理鼠标返回触发器时弹出闪烁

---

我尝试了@Wotjek Kruszewski和@danielgatis的解决方案，但这两种方法都不适用于我。警告：我使用的是Bootstrap v2.1.0，而不是v3。此解决方案采用coffeescript（为什么人们仍然使用纯javascript？=））

---

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

var timeoutObj；
$（'.list group a'）.popover({
抵销：10，
触发器：“手动”，
是的，
位置：'对'，
模板：'
'
}).mouseenter（函数（e）{
$（this.popover（'show'）；
}).mouseleave（功能（e）{
var_this=这个；
setTimeout（函数（）{
如果（！$（“.popover:hover”）.length）{
$（_this）.popover（“隐藏”）；
}
}, 100);
}); 

以下是我所做的：

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（），只需将元素作为container属性传递即可。由于appendTo（）的作用，popover成为绑定悬停事件的链接的一部分，因此当鼠标在其上移动时，popover保持打开状态。

Bootstrap 3及更高版本 简单地说，只需使用

容器

选项，并将其作为调用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>

CSS:

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

此部分是可选的，但建议使用。它将popover向下移动7像素，以便于访问

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

---

我不喜欢我找到的任何答案，所以我结合了一些接近的答案来生成以下代码。它允许您只需键入

$（选择器）.pinnablepopover（选项）每次您想要制作“可折叠”popover时

使事情变得简单的代码：

$.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() });
};

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

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

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

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

$.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'});

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

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