BootStrap's pop-up box (Popover) supports moving the mouse over the pop-up layer. Reasons and solutions for the pop-up window layer not being hidden.-JS Tutorial-php.cn

BootStrap's pop-up box (Popover) supports moving the mouse over the pop-up layer. Reasons and solutions for the pop-up window layer not being hidden.

PHPz

Release： 2018-09-28 14:44:16

Original

2643 people have browsed it

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(&#39; &#39;)后面加上
//设置延时
if (this.options.trigger.indexOf(&#39;hover&#39;) > -1) {
$.extend(true, this.options, { delay: { hide: 100 } });
}

Copy after login

2 Control cannot The disappearing code

is added after

clearTimeout(self.timeout) in Tooltip.prototype.enter = function (obj) { >

if (self.options.trigger.indexOf(&#39;hover&#39;) > -1) {
self.$tip.unbind(&#39;mouseenter&#39;).bind(&#39;mouseenter&#39;, function (e) {
self.$tip.data(&#39;data-element&#39;, self.$element);//触发popover框的点击事件时可以获取id
clearTimeout(self.timeout);
self.hoverState = &#39;in&#39;;
}).unbind(&#39;mouseleave&#39;).bind(&#39;mouseleave&#39;, function (e) {
self.hoverState = &#39;out&#39;;
self.timeout = setTimeout(function () {
if (self.hoverState == &#39;out&#39;) self.hide()
}, self.options.delay.hide)
})
}

Copy after login

The following is a supplement to the usage of pop-up box (Popover)

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.

Via JavaScript: Enable popover via JavaScript:

<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>

Copy after login

The popover plugin is not like the drop-down menu discussed before Like other plugins, it is not a pure CSS plugin. To use the plugin, you must activate it using jquery (read javascript). Use the following script to enable all popovers on the page:

$(&#39;#identifier&#39;).popover(options)

Copy after login

The above is the entire content of this article. For more related tutorials, please visit

Bootstrap Video tutorial

$(function () { $("[data-toggle=&#39;popover&#39;]").popover(); });

Copy after login