Зробити Bootstrap Popover з'являтися / зникати на курсорі замість клацання

181

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

Все, що я хочу зробити, - це поява popover, коли хтось наводить курсор на посилання, а не натискає на неї, і щоб popover зник, коли вони віддаляються. У документації сказано, що це можливо, використовуючи або атрибут даних, або jquery. Я б набагато скоріше зробив це з jquery, оскільки у мене є кілька перехожих.

javascript jquery twitter-bootstrap

— Мухамбі
джерело

20

Порада: Наведення курсору на пристрої, що торкаються дотику. Якщо ви хочете забезпечити зручність роботи сенсорних екранів, не зв'язуйте функціональність для наведення курсора.

— Jørgen R

374

Встановіть triggerпараметр popover hoverзамість click, який є типовим .

Це можна зробити за допомогою будь-яких data-*атрибутів у розмітці:

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

Або з опцією ініціалізації:

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

Ось DEMO .

— Жоао Сільва
джерело

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

— Мухамбі

8

@Jake: Використовуйте $("#popover").popover({ trigger: "hover" });.

— Жоао Сільва

Дякую! мені чомусь потрібно було реалізувати і тригер даних, і ініціалізацію JS.

— Ентоні

Чи може хтось допомогти мені зрозуміти, який кращий варіант, ініціалізація JS або атрибути даних? Навіть якщо я використовую атрибути даних, мені все одно доведеться викликати $ ("# popover"). Popover (); з мого JavaScript.

— Бейлі

@Bailey Це залежатиме від того, які правила кодування є, і якщо ви працюєте з якимись конкретними стандартами кодування, а потім особистими уподобаннями. Дивлячись на ці два, я вважаю за краще орієнтуватися на параметр тригера у функції popover (). Мені здається, це читає мені більше.

— Кодерхі

33

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

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

— Калексо
джерело

Не натискайте на цей запит - подивіться на цю назву повідомлення

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

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"

Дивіться це в дії тут , я використовую той же імпорт, що і прийнятий відповідь, тому він повинен добре працювати на старих проектах.

— Петро
джерело