La boîte contextuelle de BootStrap (Popover) prend en charge le déplacement de la souris sur la couche contextuelle. Raisons et solutions pour que la couche de fenêtre contextuelle ne soit pas masquée.

Popover est similaire à Tooltip, offrant une vue étendue. Pour activer le popover, les utilisateurs survolent simplement l'élément. Le contenu de la boîte contextuelle peut être entièrement rempli à l'aide de l'API Bootstrap Data. Cette méthode s'appuie sur des info-bulles.

1 Définissez le délai. Si la fenêtre contextuelle n'est pas déplacée après le délai, la fenêtre contextuelle sera masquée

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 Le contrôle ne peut pas Le code qui disparaît

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

Le plug-in pop-up box (Popover) génère du contenu et les balises selon les besoins. Par défaut, les Popovers sont placés derrière leur élément déclencheur. Vous pouvez ajouter un popover de deux manières : Via l'attribut data : Pour ajouter un popover, ajoutez simplement data-toggle= à une balise d'ancrage/bouton. Juste "popover". Le titre de l'ancre est le texte du popover. Par défaut, le plugin place le popover en haut.

Via JavaScript : Activer le popover via JavaScript :

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

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

Ce qui précède représente l'intégralité du contenu de cet article. Pour plus de didacticiels connexes, veuillez visiter le

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