Comment puis-je garder le pop-up bootstrap en vie pendant que le popover est en vol stationnaire?

J’utilise le popover de twitter boostrap pour créer une carte de survol pour afficher les informations utilisateur, et je déclenche le popover sur le contrôle de la souris jsfiddle ici . Je veux garder ce popover vivant pendant qu’il est en vol stationnaire.

hover for popover

 $('#example').popover({ html : true, sortinggger : 'manual', content : function() { return '
'; } }); $(document).on('mouseover', '#example', function(){ $('#example').popover('show'); }); $(document).on('mouseleave', '#example', function(){ $('#example').popover('hide'); });

Vous pouvez penser à travailler avec la carte facebook hover. Je veux faire la même chose. Comment puis-je faire ceci?

Voir ce code de travail dans Plunker

Petite modification (De la solution fournie par vikas) pour convenir à mon cas d’utilisation.
1. Ouvrez un popover lors d’un événement de survol pour le bouton popover
2. Gardez le popover ouvert lorsque vous survolez la fenêtre popover
3. Fermez les fenêtres pop-up sur mouseleave pour le bouton popover ou la fenêtre popover.

 $('.pop').popover({ sortinggger: 'manual', html: true, animation: false }) .on('mouseenter', function () { var _this = this; $(this).popover('show'); $('.popover').on('mouseleave', function () { $(_this).popover('hide'); }); }).on('mouseleave', function () { var _this = this; setTimeout(function () { if (!$('.popover:hover').length) { $(_this).popover('hide'); } }, 300); }); 

Jouez avec elle dans Plunker

Je suis venu après une autre solution à cela … voici le code

  $('.selector').popover({ html: true, sortinggger: 'manual', container: $(this).attr('id'), placement: 'top', content: function () { $return = '
'; } }).on("mouseenter", function () { var _this = this; $(this).popover("show"); $(this).siblings(".popover").on("mouseleave", function () { $(_this).popover('hide'); }); }).on("mouseleave", function () { var _this = this; setTimeout(function () { if (!$(".popover:hover").length) { $(_this).popover("hide") } }, 100); });

Voici ma prise: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Parfois, lorsque vous déplacez la souris d’un déclencheur à un contenu pop-up en diagonale , vous survolez les éléments ci-dessous. Je voulais faire face à de telles situations – tant que vous atteignez un contenu pop-up avant que le timeout ne se déclenche, vous êtes en sécurité (le popover ne disparaîtra pas). Il nécessite delay option de delay .

Ce hack remplace essentiellement la fonction de leave Popover, mais appelle l’original (qui lance le temporisateur pour masquer le popover). Ensuite, il attache un écouteur unique à l’élément de contenu mouseenter mouseenter.

Si la souris entre dans le popover, le minuteur est effacé. Puis, il se met à écouter mouseleave sur Popover et, s’il est déclenché, il appelle la fonction de départ originale pour qu’elle puisse commencer à masquer la timer.

 var originalLeave = $.fn.popover.Constructor.prototype.leave; $.fn.popover.Constructor.prototype.leave = function(obj){ var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) var container, timeout; originalLeave.call(this, obj); if(obj.currentTarget) { container = $(obj.currentTarget).siblings('.popover') timeout = self.timeout; container.one('mouseenter', function(){ //We entered the actual popover – call off the dogs clearTimeout(timeout); //Let's monitor popover content instead container.one('mouseleave', function(){ $.fn.popover.Constructor.prototype.leave.call(self, self); }); }) } }; 

J’ai utilisé le déclencheur pour hover et donné le conteneur au #element et finalement ajouté un emplacement de la box à right .

Cela devrait être votre configuration:

 $('#example').popover({ html: true, sortinggger: 'hover', container: '#example', placement: 'right', content: function () { return '
'; } });

et #example css a besoin de position:relative; cochez le jsfiddle ci-dessous:

https://jsfiddle.net/9qn6pw4p/1/

Édité

Ce violon a les deux liens qui fonctionnent sans problème http://jsfiddle.net/davidchase03/FQE57/4/

Je pense qu’un moyen facile serait ceci:

 $('.popover').each(function () { var $this = $(this); $this.popover({ sortinggger: 'hover', content: 'Content Here', container: $this }) }); 

De cette façon, le popover est créé à l’intérieur de l’élément cible lui-même. donc quand vous déplacez votre souris sur le popover, il est toujours sur l’élément. Bootstrap 3.3.2 fonctionne bien avec ceci. Une version plus ancienne peut avoir des problèmes avec l’animation, vous pouvez donc désactiver “animation: false”

C’est comme ça que je l’ai fait avec le pop-up bootstrap avec l’aide d’autres bits sur le net. Récupère dynamicment le titre et le contenu des différents produits affichés sur le site. Chaque produit ou popover reçoit un identifiant unique. Popover va disparaître à la sortie du produit ($ this .pop) ou du popover. Le délai d’attente est utilisé pour afficher le popover jusqu’à la sortie du produit au lieu du popover.

 $(".pop").each(function () { var $pElem = $(this); $pElem.popover( { html: true, sortinggger: "manual", title: getPopoverTitle($pElem.attr("id")), content: getPopoverContent($pElem.attr("id")), container: 'body', animation:false } ); }).on("mouseenter", function () { var _this = this; $(this).popover("show"); console.log("mouse entered"); $(".popover").on("mouseleave", function () { $(_this).popover('hide'); }); }).on("mouseleave", function () { var _this = this; setTimeout(function () { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 100); }); function getPopoverTitle(target) { return $("#" + target + "_content > h3.popover-title").html(); }; function getPopoverContent(target) { return $("#" + target + "_content > div.popover-content").html(); }; 

Voici une solution que j’ai conçue qui semble bien fonctionner tout en vous permettant d’utiliser l’implémentation Bootstrap normale pour activer tous les popovers.

Violon original: https://jsfiddle.net/eXpressive/hfear592/

Porté à cette question:

 hover for popover $('#example').popover({ html : true, sortinggger : 'hover', content : function() { return '
'; } }).on('hide.bs.popover', function () { if ($(".popover:hover").length) { return false; } }); $('body').on('mouseleave', '.popover', function(){ $('.popover').popover('hide'); });

La réponse de Vikas fonctionne parfaitement pour moi, ici j’ajoute également le support pour le délai (show / hide).

 var popover = $('#example'); var options = { animation : true, html: true, sortinggger: 'manual', placement: 'right', delay: {show: 500, hide: 100} }; popover .popover(options) .on("mouseenter", function () { var t = this; var popover = $(this); setTimeout(function () { if (popover.is(":hover")) { popover.popover("show"); popover.siblings(".popover").on("mouseleave", function () { $(t).popover('hide'); }); } }, options.delay.show); }) .on("mouseleave", function () { var t = this; var popover = $(this); setTimeout(function () { if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) { $(t).popover("hide") } }, options.delay.hide); }); 

Aussi s’il vous plaît prêter attention j’ai changé:

 if (!$(".popover:hover").length) { 

avec:

 if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) { 

de sorte qu’il fait référence exactement à ce popover ouvert, et pas d’autres (puisque maintenant, par le biais du délai, plus d’un pourrait être ouvert en même temps)

La réponse choisie fonctionne mais échouera si le popover est initialisé avec le body comme conteneur.

 $('a').popover({ container: 'body' }); 

Une solution basée sur la réponse choisie est le code suivant qui doit être placé avant d’utiliser le popover.

 var originalLeave = $.fn.popover.Constructor.prototype.leave; $.fn.popover.Constructor.prototype.leave = function(obj) { var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type); originalLeave.call(this, obj); if (obj.currentTarget) { self.$tip.one('mouseenter', function() { clearTimeout(self.timeout); self.$tip.one('mouseleave', function() { $.fn.popover.Constructor.prototype.leave.call(self, self); }); }) } }; 

Le changement est minimal en utilisant self.$tip au lieu de traverser le DOM en attendant que le popover soit toujours un frère de l’élément.

Même chose pour les info-bulles:

Pour moi, la solution suivante fonctionne car elle n’ajoute pas de programme d’écoute d’événement sur chaque «mouseenter» et il est possible de revenir en arrière sur l’élément d’info-bulle qui maintient la barre d’outils en vie.

 $ -> $('.element').tooltip({ html: true, sortinggger: 'manual' }). on 'mouseenter', -> clearTimeout window.tooltipTimeout $(this).tooltip('show') unless $('.tooltip:visible').length > 0 . on 'mouseleave', -> _this = this window.tooltipTimeout = setTimeout -> $(_this).tooltip('hide') , 100 $(document).on 'mouseenter', '.tooltip', -> clearTimeout window.tooltipTimeout $(document).on 'mouseleave', '.tooltip', -> sortinggger = $($(this).siblings('.element')[0]) window.tooltipTimeout = setTimeout -> sortinggger.tooltip('hide') , 100 

Cette solution a bien fonctionné pour moi: (maintenant, elle est à l’épreuve des balles) 😉

 function enableThumbPopover() { var counter; $('.thumbcontainer').popover({ sortinggger: 'manual', animation: false, html: true, title: function () { return $(this).parent().find('.thumbPopover > .title').html(); }, content: function () { return $(this).parent().find('.thumbPopover > .body').html(); }, container: 'body', placement: 'auto' }).on("mouseenter",function () { var _this = this; // thumbcontainer console.log('thumbcontainer mouseenter') // clear the counter clearTimeout(counter); // Close all other Popovers $('.thumbcontainer').not(_this).popover('hide'); // start new timeout to show popover counter = setTimeout(function(){ if($(_this).is(':hover')) { $(_this).popover("show"); } $(".popover").on("mouseleave", function () { $('.thumbcontainer').popover('hide'); }); }, 400); }).on("mouseleave", function () { var _this = this; setTimeout(function () { if (!$(".popover:hover").length) { if(!$(this).is(':hover')) { $(_this).popover('hide'); } } }, 200); }); } 
  $(function() { $("[data-toggle = 'popover']").popover({ placement: 'left', html: true, sortinggger: " focus", }).on("mouseenter", function() { var _this = this; $(this).popover("show"); $(this).siblings(".popover").on("mouseleave", function() { $(_this).popover('hide'); }); }).on("mouseleave", function() { var _this = this; setTimeout(function() { if (!$(".popover:hover").length) { $(_this).popover("hide") } }, 100); }); }); 

Je conviens que le meilleur moyen est d’utiliser celui donné par: David Chase , Cu Ly et d’autres, le plus simple est d’utiliser la propriété container: $(this) comme suit:

 $(selectorSsortingng).each( var $this = $(this); $this.popover({ html: true, placement: "top", container: $this, sortinggger: "hover", title: "Popover", content: "Hey, you hovered on element" }); ); 

Je tiens à souligner ici que le popover dans ce cas héritera de toutes les propriétés de l’élément en cours . Donc, par exemple, si vous faites cela pour un élément .btn (bootstrap), vous ne pourrez pas sélectionner de texte dans le popover . Je voulais juste enregistrer cela depuis que j’ai passé pas mal de temps à me cogner la tête.

J’ai trouvé que la mouseleave ne se déclenche pas lorsque des choses étranges se produisent, comme le focus de la fenêtre change soudainement, puis l’utilisateur revient au navigateur. Dans de tels cas, mouseleave ne tirera jamais tant que le curseur ne sera pas passé et ne quittera plus l’élément.

Cette solution que j’ai proposée repose sur mouseenter sur l’object window , elle disparaît donc lorsque la souris est déplacée ailleurs sur la page.

Cela a été conçu pour fonctionner avec plusieurs éléments sur la page qui le déclenche (comme dans un tableau).

 var allMenus = $(".menus"); allMenus.popover({ html: true, sortinggger: "manual", placement: "bottom", content: $("#menuContent")[0].outerHTML }).on("mouseenter", (e) => { allMenus.not(e.target).popover("hide"); $(e.target).popover("show"); e.stopPropagation(); }).on("shown.bs.popover", () => { $(window).on("mouseenter.hidepopover", (e) => { if ($(e.target).parents(".popover").length === 0) { allMenus.popover("hide"); $(window).off("mouseenter.hidepopover"); } }); }); 

Il sera plus flexible avec hover() :

 $(".my-popover").hover( function() { // mouse in event $this = $(this); $this.popover({ html: true, content: "Your content", sortinggger: "manual", animation: false }); $this.popover("show"); $(".popover").on("mouseleave", function() { $this.popover("hide"); }); }, function() { // mouse out event setTimeout(function() { if (!$(".popover:hover").length) { $this.popover("hide"); } }, 100); } ) 

Simple 🙂

 $('[data-toggle="popover"]').popover( { "container":"body", "sortinggger":"focus", "html":true }); $('[data-toggle="popover"]').mouseenter(function(){ $(this).sortinggger('focus'); });