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 >

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

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

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

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.

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

Bootstrap-Video-Tutorial

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