Faire apparaître / disparaître Bootstrap Popover en survol au lieu de cliquer

Je construis un site Web avec de Bootstrap Popover et je ne peux pas comprendre comment faire le popover apparaissent sur le vol stationnaire au lieu de clic.

Tout ce que je veux faire, c'est faire apparaître un popover lorsque quelqu'un survole un lien au lieu de cliquer dessus et que le popover disparaisse lorsqu'il s'éloigne. La documentation indique qu'il est possible d'utiliser l'attribut data ou jquery. Je préfère de loin le faire avec jquery car j'ai plusieurs popovers.

Définissez l' triggeroption du popover sur au hoverlieu de click, qui est l' option par défaut .

Cela peut être fait en utilisant l'un des data-*attributs du balisage:

<a id="popover" data-trigger="hover">Popover</a>

Ou avec une option d'initialisation:

$("#popover").popover({ trigger: "hover" });

Voici une DEMO .

J'aimerais ajouter que pour l'accessibilité, je pense que vous devriez ajouter un déclencheur de focus:

c'est à dire $("#popover").popover({ trigger: "hover focus" });

Si vous souhaitez survoler le popover lui-même, vous devez utiliser un déclencheur manuel.

Voici ce que j'ai proposé:

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')) // change $(this) to $(_this) 
                {
                    $(_this).popover('hide');
                }
            }
        }, 200);
    });
}

La fonctionnalité que vous avez décrite peut être facilement obtenue à l'aide de l'info-bulle Bootstrap.

<button id="example1" data-toggle="tooltip">Tooltip on left</button>

Appelez ensuite la fonction tooltip () pour l'élément.

$('#example1').tooltip();

http://getbootstrap.com/javascript/#tooltips

Après avoir essayé quelques-unes de ces réponses et constaté qu'elles ne s'adaptent pas bien avec plusieurs liens (par exemple, la réponse acceptée nécessite une ligne de jquery pour chaque lien que vous avez), je suis tombé sur un moyen qui nécessite un minimum de code pour fonctionner, et il semble également fonctionner parfaitement, du moins sur Chrome.

Vous ajoutez cette ligne pour l'activer:

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

Et ces paramètres à vos liens d'ancrage:

data-toggle="popover" data-trigger="hover"

Voyez-le en action ici , j'utilise les mêmes importations que la réponse acceptée, donc cela devrait fonctionner correctement sur les projets plus anciens.