Home > Web Front-end > JS Tutorial > body text

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
2600 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(' ')后面加上
//设置延时
if (this.options.trigger.indexOf('hover') > -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('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)
})
}
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
!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template