Popover is similar to Tooltip, providing an expanded view. To activate the popover, users simply hover over the element. The content of the popup box can be filled entirely using the Bootstrap Data API. This method relies on tooltips.
1 Set the delay. If the pop-up window is not moved after the delay, the pop-up window will be hidden.
Tooltip.prototype.init = function{中的 var triggers = this.options.trigger.split(' ')后面加上 //设置延时 if (this.options.trigger.indexOf('hover') > -1) { $.extend(true, this.options, { delay: { hide: 100 } }); }
2 Control cannot The disappearing code
is added after
clearTimeout(self.timeout) in Tooltip.prototype.enter = function (obj) { >
if (self.options.trigger.indexOf('hover') > -1) { self.$tip.unbind('mouseenter').bind('mouseenter', function (e) { self.$tip.data('data-element', self.$element);//触发popover框的点击事件时可以获取id clearTimeout(self.timeout); self.hoverState = 'in'; }).unbind('mouseleave').bind('mouseleave', function (e) { self.hoverState = 'out'; self.timeout = setTimeout(function () { if (self.hoverState == 'out') self.hide() }, self.options.delay.hide) }) }
The pop-up box (Popover) plug-in generates content and tags according to requirements. By default, it Popovers are placed behind their triggering element. You can add a popover in two ways:
Via the data attribute: To add a popover, just add data-toggle= to an anchor/button tag Just "popover". The title of the anchor is the text of the popover. By default, the plugin places the popover at the top.<a href="#" data-toggle="popover" title="Example popover"> 请悬停在我的上面 </a>
$('#identifier').popover(options)
$(function () { $("[data-toggle='popover']").popover(); });