Comment puis-je garder Twitter Bootstrap Popover ouvert jusqu'à ce que ma souris y pénètre?

Question

J'ai un lien qui utilise le Twitter Bootstrap Liste version 1.3.0 à montrer certains de l'information. Cette information inclut un lien, mais chaque fois que je déplace ma souris à partir du lien à la liste, la liste disparaît.

Comment puis-je détenir liste ouverte assez longtemps pour permettre à la souris pour se déplacer? Puis, quand la souris se déplace en dehors du lien et de la liste, se cacher?

Ou est-il un autre plugin qui peut faire cela?

Answer 1

Avec bootstrap (testé avec la version 2), j'ai compris le code suivant:

 $("a[rel=popover]")
            .popover({
                offset: 10,
                trigger: 'manual',
                animate: false,
                html: true,
                placement: 'left',
                template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'

            }).click(function(e) {
                e.preventDefault() ;
            }).mouseenter(function(e) {
                $(this).popover('show');
            });
 

L'essentiel est de remplacer le modèle avec mouseleave () enabler. J'espère que ça aide.

Answer 2

Bootstrap 3 et ci-dessus

Simple, il suffit d'utiliser l' container option et ont comme l'élément qui est l'appel de la liste. De cette façon, la liste est un enfant de l'élément qui l'appelle. Par conséquent, vous êtes techniquement toujours planant au-dessus de la mère, parce que l'enfant liste lui appartient.

Par exemple:

jQuery:

$($('ul > li')).each(function () {
    var $elem = $(this);
    $elem.popover({
        placement: 'top',
        trigger: 'hover',
        html: true,
        container: $elem
    });
});

HTML:

<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>
<div class="pop" data-content="Testing 12345">This has a popover</div>

TRAVAIL DE DÉMONSTRATION

Answer 3

Pour ajouter à l’exemple de Marchello, si vous voulez que le popover disparaisse si l’utilisateur éloigne sa souris du popover et du lien source, essayez ceci.

 var timeoutObj;
$('.nav_item a').popover({
    offset: 10,
    trigger: 'manual',
    html: true,
    placement: 'right',
    template: '<div class="popover" onmouseover="clearTimeout(timeoutObj);$(this).mouseleave(function() {$(this).hide();});"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).mouseenter(function(e) {
    $(this).popover('show');
}).mouseleave(function(e) {
    var ref = $(this);
    timeoutObj = setTimeout(function(){
        ref.popover('hide');
    }, 50);
});
 

Answer 4

Ceci est un peu hacky, mais en me basant sur l'exemple de marchello, je l'ai fait (pas besoin de modèle):

 $(".trigger-link").popover({
  trigger: "manual",
}).on("click", function(e) {
  e.preventDefault();
}).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);
});
 

Le setTimeout aide à garantir qu'il est temps de passer du lien de déclenchement au popover.

Answer 5

Cette question sur le bootstrap github pensions de traite de ce problème. en gras souligné l'expérimental "en haut/bas/gauche/droite" de placement. Il fonctionne, plutôt bien, mais vous devez vous assurer que la liste de déclenchement n'est pas positionné de manière statique avec les css. Sinon la liste n'apparaît pas là où vous le souhaitez.

HTML:

<span class="myClass" data-content="lorem ipsum content" data-original-title="pop-title">Hover me to show a popover.</span>

CSS:

/*CSS */
.myClass{ position: relative;}

JS:

$(function(){
  $('.myClass').popover({placement: 'in top'});
});