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

Question

提问by Tinyfool

I have a link that uses the Twitter Bootstrap Popover version 1.3.0to show some information. This information includes a link, but every-time I move my mouse from the link to the popover, the popover just disappears.

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

How can I hold popover open long enough to enable the mouse to move into it? Then when the mouse moves out of the link and popover, hide it?

我怎样才能让弹出窗口保持足够长的打开时间以使鼠标移入其中？那么当鼠标移出链接和popover时，隐藏它？

Or is there some other plugin that can do this?

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

Answer 1

采纳答案by Tinyfool

Now I just switch to webuiPopover, it just works.

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

Answer 2

回答by marchello

With bootstrap (tested with version 2) I figured out the following code:

使用引导程序（用版本 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');
            });

The main point is to override template with mouseleave() enabler. I hope this helps.

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

Answer 3

回答by Fizzix

Bootstrap 3 and above

Bootstrap 3 及以上

Simple, just use the containeroption and have it as the element that is calling the popover. This way, the popover is a child of the element that calls it. Hence, you are technically still hovering over the parent, because the child popover belongs to it.

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

For example:

例如：

HTML:

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:

jQuery：

Running an $.each()loop over every one of my elements that I want a popover binded to its parent. In this case, each element has the class of pop.

$.each()在我希望弹出窗口绑定到其父元素的每个元素上运行循环。在这种情况下，每个元素的类都是pop。

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

CSS:

CSS：

This part is optional, but recommended. It moves the popover down by 7 pixels for easier access.

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

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

WORKING DEMO

工作演示

Answer 4

回答by Kevin Lawrence

Just to add to Marchello's example, if you want the popover to disappear if the user moves their mouse away from the popover andsource link, try this out.

只是添加到 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);
});

Answer 5

回答by clem

This is a little hacky, but building off of marchello's example, I did this (no need for template):

这有点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);
});

The setTimeouthelps ensure that there's time to travel from the trigger link to the popover.

这setTimeout有助于确保有时间从触发链接到弹出框。

Answer 6

回答by stevendaniels

This issue on the bootstrap githubrepo deals with this problem. fat pointed out the experimental "in top/bottom/left/right" placement. It works, pretty well, but you have to make sure the popover trigger is not positioned statically with css. Otherwise the popover won't appear where you want it to.

bootstrap githubrepo上的这个 issue处理这个问题。fat 指出了实验性的“在上/下/左/右”位置。它工作得很好，但你必须确保弹出触发器不是用 css 静态定位的。否则弹出框不会出现在你想要的地方。

HTML:

HTML：

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

CSS:

CSS：

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

JS:

JS：

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

Answer 7

回答by Wojtek Kruszewski

Here's my take: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

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

Sometimes while moving mouse from popover trigger to actual popover content diagonally, you hover over elements below. I wanted to handle such situations – as long as you reach popover content before the timeout fires, you're save (the popover won't disappear). It requires delayoption.

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

This hack basically overrides Popover leavefunction, but calls the original (which starts timer to hide the popover). Then it attaches a one-off listener to mouseenterpopover content element's.

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

If mouse enters the popover, the timer is cleared. Then it turns it listens to mouseleaveon popover and if it's triggered, it calls the original leave function so that it could start hide timer.

如果鼠标进入弹出窗口，则计时器被清除。然后它会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);
      });
    })
  }
};

Answer 8

回答by Opcrat

Solution worked for us for Bootstrap 3.

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

回答by vinit

Here is what i did:

这是我所做的：

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

This is a very simple and awesone solution to this probelm, which i found out by looking into the bootstrap tooltip code. In Bootstrap v3.0.3 here is the line of code i noticed:

这是这个问题的一个非常简单和令人敬畏的解决方案，我是通过查看引导工具提示代码发现的。在 Bootstrap v3.0.3 中，这是我注意到的代码行：

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

this says that if containerproperty of popover is defined then the popover gets appendTo() the element instead of insertAfter() the original element, all you need to do is just pass the element as container property. Because of appendTo() the popover becomes part of the link on which the hover event was binded and thus keeps the popover open when mouse moves on it.

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

Answer 10

回答by ShogunPanda

This works for me on BootStrap 3:

这在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 11

回答by danielgatis

This is a version of Wojtek Kruszewski solution. This version handle popover blink when mouse go back to trigger. http://jsfiddle.net/danielgatis/QtcpD/

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

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

提问by Tinyfool

采纳答案by Tinyfool

回答by marchello

回答by Fizzix

Bootstrap 3 and above

Bootstrap 3 及以上

回答by Kevin Lawrence

回答by clem

回答by stevendaniels

回答by Wojtek Kruszewski

回答by Opcrat

回答by vinit

回答by ShogunPanda

回答by danielgatis

相关推荐

最近更新

标签

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

提问by Tinyfool

采纳答案by Tinyfool

回答by marchello

回答by Fizzix

Bootstrap 3 and above

Bootstrap 3 及以上

回答by Kevin Lawrence

回答by clem

回答by stevendaniels

回答by Wojtek Kruszewski

回答by Opcrat

回答by vinit

回答by ShogunPanda

回答by danielgatis

相关推荐

如何使用 const 关键字创建 Javascript 常量作为对象的属性？

从 Javascript 中的字符串中删除括号

JavaScript 中的类与静态方法

Javascript 如何调用datepicker jquery 的一个js 函数onSelect 事件？

相关推荐

最近更新

标签