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

181

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

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

javascript jquery twitter-bootstrap

— Muhambi
источник

20

Совет: наведите курсор мыши на сенсорные устройства. Если вы хотите обеспечить удобство использования сенсорных экранов, не связывайте функциональность с парением.

— Jørgen R

374

Установите вместо triggerпараметра popover значение hover« clickпо умолчанию» .

Это можно сделать, используя любой data-*атрибут в разметке:

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

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

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

Вот ДЕМО .

— Жоао Силва
источник

Спасибо за ответ. Как мне установить опцию триггера для этого кода? <script> $(function () { $("#popover").popover(); }); </script>

— Мухамби

8

@ Джейк: использовать $("#popover").popover({ trigger: "hover" });.

— Жоао Силва

Спасибо! по какой-то причине мне нужно было реализовать как триггер данных, так и инициализацию JS.

— Энтони,

Может кто-нибудь помочь мне понять, какой вариант лучше, инициализация JS или атрибуты данных? Даже если я использую атрибуты данных, мне все равно придется вызывать $ ("# popover"). Popover (); из моего JavaScript.

— Бейли

@Bailey Это будет зависеть от ваших правил кодирования, от того, работаете ли вы с какими-то конкретными стандартами кодирования, а также от личных предпочтений. Глядя на эти два, я предпочитаю нацеливать опцию триггера в функции popover (). Кажется, более читабельным для меня.

— Кодери

33

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

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

— Calexo
источник

Не нажимайте на этот запрос - посмотрите на это название поста

— Веб-дизайн Альбукерке

14

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

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

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

— Йоханнес Фернер
источник

6

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

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

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

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

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

— VforVitamin
источник

1

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

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

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

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

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

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

— Питер
источник