Question

当我将鼠标悬停在按钮上时，我会尝试使用popover。

示例代码：

<button data-content="some data with links" data-auto-close="1" data-placement="bottom" bs-popover html='true' data-trigger="hover">Popover</button>

当我将鼠标悬停在按钮上时，会出现弹出窗口。但问题是当我鼠标移动到弹出窗口时，它会消失。当我搬到它时，我怎么能让popover保持显示？当我点击上面的内容链接时，如何隐藏popover？

Answer 1

完全相同的事情有一个fiddle demo。希望它有所帮助。

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>

JS：

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

AngularStrap悬停弹出窗口

1 个答案: