Сделать Bootstrap Popover появляется/исчезает при наведении вместо щелчка

Я создаю веб-сайт с помощью Bootstrap пирог и я не могу понять,как заставить popover появляться при наведении вместо щелчка.

все, что я хочу сделать, это иметь popover появляется, когда кто-то зависает над ссылкой, а не нажимает на нее, и для popover исчезает, когда они уходят. В документации говорится, что это возможно с помощью атрибута data или jquery. Я бы предпочел сделать это с jquery, так как у меня есть несколько popovers.

153
javascript jquery twitter-bootstrap

5 ответов

установить trigger опция popover в hover вместо click, который является по умолчанию один.

это можно сделать с помощью data-* атрибуты в разметке:

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

или с опцией инициализации:

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

здесь демо.

328

Я хотел бы добавить, что для доступности, я думаю, вы должны добавить триггер фокуса:

то есть $("#popover").popover({ trigger: "hover focus" });

29

Если вы хотите, чтобы навести сам popover, а также вы должны использовать ручной триггер.

вот что я придумал: 

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

описанная функциональность может быть легко достигнута с помощью всплывающей подсказки Bootstrap.

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

затем вызовите функцию tooltip () для элемента.

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

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

6

попробовав несколько из этих ответов и обнаружив, что они не масштабируются с несколькими ссылками (например, принятый ответ требует строки jquery для каждой ссылки, которую вы имеете), я наткнулся на способ, который требует минимального кода для работы, и он также работает отлично, по крайней мере, на Chrome.

вы добавляете эту строку, чтобы активировать ее:

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

и эти настройки для ваших якорных ссылок:

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

увидеть его в действии здесь, я используя тот же импорт, что и принятый ответ, он должен отлично работать в старых проектах.

0