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

est ajouté après

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

Ce qui suit est un complément à l'utilisation de la boîte pop-up (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)
})
}

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>

Le plugin popover n'est pas comme le menu déroulant évoqué précédemment. Comme les autres plugins, il n'est pas un pur plugin CSS. Pour utiliser le plugin, vous devez l'activer en utilisant jquery (lire javascript). Utilisez le script suivant pour activer tous les popovers sur la page :

$('#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

Tutoriel vidéo Bootstrap.

!

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