web-dev-qa-db-fra.com

Faire en sorte que Bootstrap Popover apparaisse / disparaisse au survol au lieu de cliquer

Je construis un site Web avec Bootstrap Popover et je ne vois pas comment faire en sorte que le popover apparaisse en survol au lieu de cliquer.

Tout ce que je veux faire, c'est qu'un popover apparaisse 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 de données ou jquery. Je préférerais de beaucoup le faire avec jQuery car j'ai plusieurs popovers.

javascriptjquerytwitter-bootstrap
172
Muhambi

Définissez l'option trigger du popover sur hover au lieu de click, qui est le valeur par défaut .

Cela peut être fait en utilisant soit les attributs data-* dans le balisage:

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

Ou avec une option d'initialisation:

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

Voici un DÉMO.

357
João Silva

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

31
Calexo

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

Voici ce que je suis venu avec:

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);
    });
}
11
Johannes Ferner

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

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

Ensuite, appelez la fonction tooltip () pour l'élément.

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

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

6
VforVitamin

Après avoir essayé quelques-unes de ces réponses et constaté qu’elles ne fonctionnaient pas bien avec plusieurs liens (par exemple, la réponse acceptée nécessite une ligne d’interrogation 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"

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

1
Peter