引导弹出窗口出现在悬停并保持一秒钟答案

【问题标题】：Bootstrap popover to appear on hover and remain for a second引导弹出窗口出现在悬停并保持一秒钟
【发布时间】：2014-04-22 10:10:21
【问题描述】：

我希望在悬停时出现一个弹出框，但只有在用户与之交互时才保留（它包含链接），如果没有，它应该在 500 毫秒后消失。

Javascript

$(document).ready(function(){
    $('[data-toggle="tooltip"]').popover({ title: 'Look! A bird!', html:true, delay: { show: 100, hide: 1000 } });
});

PHP

<button type="button" class="badge btn btn-default" data-trigger="click" data-toggle="tooltip" data-placement="top" data-html=true data-content="@foreach($tag->tracks as $track) <a href='/tracks/{{ $track->mdbid }}'>{{ $track->title }}</a> @endforeach">{{ $tag->tracks->count() }}</button>

忽略括号内的搞笑代码（这是Laravel刀片语法）

JSFiddle

我已经创建了这个JSFiddle，尽管它不能正常工作（它在我的机器上可以）。我有延迟工作。但是，如果鼠标在弹出框内，它仍然会消失。如何防止这种情况并使其仅在将鼠标移到弹出框外时才消失？

【问题讨论】：

标签： jquery twitter-bootstrap-3 popover

【解决方案1】：

这不是我的作品，我不知道原作者是谁，但所有的功劳归于他们

这个JSFiddle 解决了它。

HTML

<p id='container'>
<button class='btn btn-primary btn-large' data-popover="true" data-html=true data-content="<a href='http://www.wojt.eu' target='blank' >click me, I'll try not to disappear</a>">hover here</button>
</p>

Javascript

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


$('body').popover({ selector: '[data-popover]', trigger: 'click hover', placement: 'auto', delay: {show: 50, hide: 400}});

CSS

#container {
    text-align: center;
    margin: 8em 3em;
}

【讨论】：