Comment puis-je garder bootstrap liste en vie, tandis que la liste est en cours de plané?

La vue de ce code de travail dans Plunker

Petite modification (à Partir de la solution fournie par vikas) pour l'adapter à mon cas d'utilisation.

1. Ouvrir la liste sur le vol stationnaire de l'événement pour la liste bouton

2. Gardez liste ouverte quand le curseur est sur la liste de la boîte de

3. Fermer la fenêtre pop-over sur mouseleave, soit la liste bouton de, ou de la liste de la boîte.

$('.pop').popover({
    trigger: '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);
});

Jouer avec elle dans Plunker

Voici mon point de vue: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Parfois, tout en déplaçant la souris de liste déclencheur réelle de la liste de contenu en diagonale, vous passez la souris sur les éléments ci-dessous. Je voulais gérer de telles situations – aussi longtemps que vous atteignez liste du contenu avant que le délai de feux, vous êtes sûr (la liste ne vont pas disparaître). Il nécessite delay option.

Ce hack essentiellement des remplacements Liste leave fonction, mais les appels de l'original (qui démarre la minuterie pour masquer la liste). Puis il attache un auditeur à mouseenter liste du contenu de l'élément.

Si la souris entre dans la liste, la minuterie est désactivée. Puis s'il écoute mouseleave sur la liste et s'il est déclenché, il appelle le congé initiale de la fonction de sorte qu'il pourrait commencer à les cacher de la minuterie.

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

Je pense que d'une manière facile serait celui-ci:

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

De cette façon, la liste est créée à l'intérieur de l'élément cible elle-même. ainsi, lorsque vous déplacez votre souris sur la liste, c'est toujours au-dessus de l'élément. Bootstrap 3.3.2 fonctionne bien avec cela. Ancienne version peut avoir quelques problèmes avec l'animation, de sorte que vous pouvez désactiver l'animation": false,"

Voici une solution que j'ai trouvée qui semble bien fonctionner tout en vous permettant d'utiliser la normale Bootstrap mise en œuvre pour tourner sur tous les popovers.

Original violon: https://jsfiddle.net/eXpressive/hfear592/

Porté à cette question:

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

$('#example').popover({
    html : true,
    trigger : 'hover',
    content : function() {
        return '<div class="box"></div>';
    }
}).on('hide.bs.popover', function () {
    if ($(".popover:hover").length) {
      return false;
    }                
}); 

$('body').on('mouseleave', '.popover', function(){
    $('.popover').popover('hide');
});

La réponse choisie œuvres mais échouera si la liste est initialisée avec la body que le conteneur.

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

Une solution basée sur la réponse choisie est le code suivant doit être placé à l'avant à l'aide de la liste.

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 minime à l'aide de self.$tip au lieu de traverser le DOM attendre la liste à être toujours l'un des frères et sœurs de l'élément.

Simple 🙂

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

Cette solution a bien marché pour moi: (maintenant, ses pare-balles) 😉

function enableThumbPopover() {
    var counter;

    $('.thumbcontainer').popover({
        trigger: '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);
    });
}

J'ai trouvé le mouseleave ne se déclenche pas lorsque des choses étranges se produisent, comme le focus de la fenêtre se modifie brusquement, l'utilisateur revient sur le navigateur. Dans de tels cas, mouseleave ne sera jamais le feu jusqu'à ce que le curseur passe dessus et laisse l'élément nouveau.

Cette solution m'est venu s'appuie sur mouseenter sur le window objet, de sorte qu'il disparaît lorsque la souris est déplacée ailleurs sur la page.

Cet a été conçu pour fonctionner avec le fait d'avoir de multiples éléments sur la page, qui va la déclencher (comme dans un tableau).

var allMenus = $(".menus");
allMenus.popover({
    html: true,
    trigger: "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");
        }
    });
});

C'est mon code pour afficher la dynamique des info-bulles avec retard et chargé en ajax.

JS:

$(window).on('load', function () {
    generatePopovers();
    
    $.fn.dataTable.tables({ visible: true, api: true }).on('draw.dt', function () {
        generatePopovers();
    });
});

$(document).ajaxStop(function () {
    generatePopovers();
});

JS:

function generatePopovers() {
var popover = $('a[href*="../Something.aspx"]'); //locate the elements to popover

popover.each(function (index) {
    var poplink = $(this);
    if (poplink.attr("data-toggle") == null) {
        console.log("RENDER POPOVER: " + poplink.attr('href'));
        poplink.attr("data-toggle", "popover");
        poplink.attr("data-html", "true");
        poplink.attr("data-placement", "top");
        poplink.attr("data-content", "Loading...");
        poplink.popover({
            animation: false,
            html: true,
            trigger: 'manual',
            container: 'body',
            placement: 'top'
        }).on("mouseenter", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (thispoplink.is(":hover")) {
                    thispoplink.popover("show");
                    loadDynamicData(thispoplink); //load data by ajax if you want
                    $('body .popover').on("mouseleave", function () {
                        thispoplink.popover('hide');
                    });
                }
            }, 1000);
        }).on("mouseleave", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (!$("body").find(".popover:hover").length) {
                    thispoplink.popover("hide");
                }
            }, 100);
        });
    }
});

JS:

function loadDynamicData(popover) {
    var params = new Object();
    params.somedata = popover.attr("href").split("somedata=")[1]; //obtain a parameter to send
    params = JSON.stringify(params);
    //check if the content is not seted
    if (popover.attr("data-content") == "Loading...") {
        $.ajax({
            type: "POST",
            url: "../Default.aspx/ObtainData",
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (data) {
                console.log(JSON.parse(data.d));
                var dato = JSON.parse(data.d);
                if (dato != null) {
                    popover.attr("data-content",dato.something); //here you can set the data returned
                    if (popover.is(":hover")) {
                        popover.popover("show"); //use this for reload the view
                    }
                }
            },

            failure: function (data) {
                itShowError("- Error AJAX.<br>");
            }
        });
    }
}