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

181

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.

javascript jquery twitter-bootstrap

— Muhambi
source

20

Astuce: le survol est nul sur les appareils tactiles. Si vous souhaitez garantir la convivialité des écrans tactiles, ne liez pas la fonctionnalité au survol.

— Jørgen R

374

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 .

— João Silva
source

Merci pour la réponse. Comment définir une option de déclenchement sur ce code? <script> $(function () { $("#popover").popover(); }); </script>

— Muhambi

8

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

— João Silva le

Merci! pour une raison quelconque, je devais implémenter à la fois le déclencheur de données et l'initialisation JS.

— Anthony

Quelqu'un peut-il m'aider à comprendre quelle est la meilleure option, l'initialisation JS ou les attributs de données? Même si j'utilise des attributs de données, je devrais quand même appeler $ ("# popover"). Popover (); à partir de mon JavaScript.

— Bailey

@Bailey Cela dépendra de vos règles de codage et si vous travaillez avec des normes de codage particulières, puis de vos préférences personnelles. En regardant les deux, je préfère cibler l'option de déclenchement dans la fonction popover (). Cela me semble plus lisible.

— Coderhi le

33

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

— Calexo
source

Pas de clic pour cette demande - regardez ce titre de l'article

— Albuquerque Web Design

14

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

— Johannes Ferner
source

6

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

— VforVitamin
source

1

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.

— Peter
source