[英]AngularStrap hover popover
悬停按钮时,我试图使弹出窗口的外观。
示例代码:
<button data-content="some data with links" data-auto-close="1" data-placement="bottom" bs-popover html='true' data-trigger="hover">Popover</button>
当我将鼠标悬停在按钮上时,会出现弹出窗口。 但是问题是当我将鼠标移到弹出窗口时,它消失了。 移动到弹出式窗口时,如何让它保持显示状态? 单击内容链接时,如何隐藏弹出窗口?
完全相同的东西有一个小提琴演示 。 希望能帮助到你。
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}});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.