Das Popup-Fenster (Popover) von BootStrap unterstützt das Bewegen der Maus über die Popup-Ebene. Gründe und Lösungen dafür, dass die Popup-Fensterebene nicht ausgeblendet wird.

Popover ähnelt Tooltip und bietet eine erweiterte Ansicht. Um das Popover zu aktivieren, bewegen Benutzer einfach den Mauszeiger über das Element. Der Inhalt der Popup-Box kann mithilfe der Bootstrap Data API vollständig gefüllt werden. Diese Methode basiert auf Tooltips.

1 Legen Sie die Verzögerung fest. Wenn das Popup-Fenster nach der Verzögerung nicht verschoben wird, wird das Popup-Fenster ausgeblendet >

2 Steuerung nicht möglich. Der verschwindende Code

Tooltip.prototype.init = function{中的
var triggers = this.options.trigger.split(' ')后面加上
//设置延时
if (this.options.trigger.indexOf('hover') > -1) {
$.extend(true, this.options, { delay: { hide: 100 } });
}

wird nach

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

Das Folgende ist eine Ergänzung zur Verwendung der Popup-Box (Popover)

Das Popup-Box-Plugin (Popover) generiert Inhalte und Tags entsprechend den Anforderungen werden Popovers standardmäßig hinter ihrem auslösenden Element platziert. Sie können ein Popover auf zwei Arten hinzufügen:

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

Über das Datenattribut: Um ein Popover hinzuzufügen, fügen Sie einfach data-toggle= zu einem Anker-/Schaltflächen-Tag hinzu. Einfach „Popover“. Der Titel des Ankers ist der Text des Popovers. Standardmäßig platziert das Plugin das Popover oben.

Über JavaScript: Popover über JavaScript aktivieren:

Das Popover-Plugin ähnelt nicht dem zuvor besprochenen Dropdown-Menü. Wie andere Plugins auch ist kein reines CSS-Plugin. Um das Plugin nutzen zu können, müssen Sie es mit jquery (Javascript lesen) aktivieren. Verwenden Sie das folgende Skript, um alle Popovers auf der Seite zu aktivieren:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Weitere verwandte Tutorials finden Sie unter

Bootstrap-Video-Tutorial

!

$('#identifier').popover(options)