Comment puis-je organiser Twitter Bootstrap Liste ouverte jusqu'à ce que ma souris se déplace?

Avec bootstrap (testé avec la version 2) j'ai trouvé 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');
            });

Le point principal est de remplacer le modèle avec mouseleave() enabler. J'espère que cette aide.

OriginalL'auteur marchello

Bootstrap 3 et au-dessus de

Simple, il suffit d'utiliser la 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 appartient à.

Par exemple:

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>

jQuery:

De l'exécution d'une $.each() boucle sur chacune de mes éléments que je veux une fenêtre pop-over lié à son parent. Dans ce cas, chaque élément a la classe de pop.

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

CSS:

Cette partie est facultative, mais recommandée. Il se déplace de la liste en bas de 7 pixels pour un accès plus facile.

.pop .popover {
    margin-top:7px;
}

TRAVAIL DÉMO

OriginalL'auteur Fizzix

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

OriginalL'auteur stevendaniels

Solution a fonctionné pour nous, pour Bootstrap 3.

var timeoutObj;
$('.list-group a').popover({
    offset: 10,
    trigger: 'manual',
    html: true,
    placement: 'right',
    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>'
}).mouseenter(function(e) {
    $(this).popover('show');
}).mouseleave(function(e) {
    var _this = this;
    setTimeout(function() {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 100);
}); 

OriginalL'auteur Opcrat

Ceci est une version de Wojtek Kruszewski solution. Cette version de la poignée liste clignoter lorsque la souris revenir à déclencher. http://jsfiddle.net/danielgatis/QtcpD/

(function($) {
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) {
var current = $(obj.currentTarget);
var container = current.siblings(".popover");
container.on("mouseenter", function() {
clearTimeout(self.timeout);
});
container.on("mouseleave", function() {
originalLeave.call(self, self);
});
}
};
var originalEnter = $.fn.popover.Constructor.prototype.enter;
$.fn.popover.Constructor.prototype.enter = function(obj) {
var self = (obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data("bs." + this.type));
clearTimeout(self.timeout);
if (!$(obj.currentTarget).siblings(".popover:visible").length) {
originalEnter.call(this, obj);
}
};
})(jQuery);

OriginalL'auteur danielgatis

Voici ce que j'ai fait:

e = $("a[rel=popover]")
e.popover({
content: d, 
html:true, 
trigger:'hover',
delay: {hide: 500},
placement: 'bottom',
container: e, 
})

C'est très simple et awesone solution à ce problème, que j'ai découvert par la recherche dans le bootstrap info-bulle de code. Dans le Bootstrap v3.0.3 voici la ligne de code que j'ai remarqué:

this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)

ce dit que si container propriété de la liste est définie alors la liste obtient appendTo() de l'élément au lieu de insertAfter() à l'élément d'origine, tout ce que vous devez faire est de simplement passer l'élément du conteneur de la propriété. En raison de appendTo() la liste devient une partie du lien sur lequel le hover événement a été " lié " et maintient ainsi la liste ouverte lorsque la souris se déplace sur elle.

OriginalL'auteur vinit

À la fin de la conversation liée par @stevendaniels est un lien vers un Twitter Bootstrap extension appelée BootstrapX - clickover par Lee Carmichael. Cela modifie la liste à partir d'un overlarge info-bulle dans un contrôle interactif, qui peut être fermée en cliquant ailleurs sur le formulaire, un bouton de fermeture, ou après un délai d'attente. Il est facile à utiliser, et très bien fonctionné pour le projet, j'ai besoin d'elle. Quelques exemples de son utilisation peuvent être trouvés ici.

OriginalL'auteur Miika L.

Après avoir vu toutes les Réponses que j'ai fait ce je pense qu'il sera utile .Vous Pouvez gérer Tout ce dont vous avez besoin.
Beaucoup de réponse ne fait pas de spectacle de retard je l'utilise. Son travail très agréable dans mon projet

/******
/*************************************************************/

<div class='thumbnail' data-original-title=''  style='width:50%'>    
<div id='item_details' class='popper-content hide'>
<div>
<div style='height:10px'> </div>
<div class='title'>Bad blood </div>
<div class='catagory'>Music </div>
</div>
</div>
HELLO POPOVER
</div>"

/****************CODE DE SCRIPT ****************** VEUILLEZ UTILISER DE L'ENTENDRE ******/

$(".thumbnail").popover({
trigger: "manual" ,
html: true,
animation:true,
container: 'body',
placement: 'auto right',
content: function () {
return $(this).children('.popper-content').html();
}}) .on("mouseenter", function () {
var _this = this;
$('.thumbnail').each(function () {
$(this).popover('hide');
});
setTimeout(function(){
if ($(_this).is(':hover')) {
$(_this).popover("show");
}
},1000);
$(".popover").on("mouseleave", function () {
$('.thumbnail').each(function () {
$(this).popover('hide');
});
$(_this).popover('hide');
}); }).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 100); });

OriginalL'auteur Ashaduzaman Bhuiyan