Spraw, aby Bootstrap Popover pojawiał się / znikał po najechaniu kursorem zamiast kliknięcia

Tworzę stronę internetową z Popover Bootstrap i nie mogę wymyślić, jak wyświetlić popover po najechaniu myszą zamiast kliknięcia.

Chcę tylko, aby pojawiło się okno popover, gdy ktoś najedzie kursorem na link zamiast go klikać, a okno popover zniknie po odejściu. Dokumentacja mówi, że jest to możliwe przy użyciu atrybutu danych lub jquery. Wolałbym to zrobić za pomocą jquery, ponieważ mam wiele popoverów.

Ustaw triggeropcję popover na hoverzamiast click, która jest domyślna .

Można to zrobić za pomocą jednego z data-*atrybutów w znaczniku:

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

Lub z opcją inicjalizacji:

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

Oto DEMO .

Chciałbym dodać to dla ułatwienia dostępu, myślę, że powinieneś dodać wyzwalacz aktywności:

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

Jeśli chcesz najechać kursorem na samego popovera, musisz użyć wyzwalacza ręcznego.

Oto co wymyśliłem:

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

Opisaną funkcjonalność można łatwo uzyskać za pomocą podpowiedzi Bootstrap.

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

Następnie wywołaj funkcję tooltip () dla elementu.

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

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

Po wypróbowaniu kilku z tych odpowiedzi i stwierdzeniu, że nie skalują się one dobrze z wieloma linkami (na przykład zaakceptowana odpowiedź wymaga wiersza jquery dla każdego linku), natknąłem się na sposób, który wymaga minimalnego kodu do działania, i wydaje się również działać idealnie, przynajmniej w Chrome.

Dodaj tę linię, aby ją aktywować:

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

I te ustawienia do linków kontrolnych:

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

Zobacz to w akcji tutaj , używam tego samego importu co zaakceptowana odpowiedź, więc powinno działać dobrze na starszych projektach.