Для получения полного доступа
зарегистрируйтесь.
Сниппет,  JavaScript

Не скрывать открытый Popover по наведению в Boostrap 3


Если вам нужно, чтобы открытый popover в Boostrap 3 по наведению не скрывался, пока курсор на самом popover, вам поможет следующее решение.

Демо 97f041fdf9247cf838713969b2855d0b.gif


Добавляем js

$('[data-toggle="popover"]').popover({
        trigger: "manual",
        html: true,
        // Берём текст для popover из скрытого элемента внутри ссылки
        content: $(this).find('.popover-content').html()
    })
    .on("mouseenter", function () {
        $(this).popover("show");
        $(".popover").on("mouseleave", function () {
            $(this).popover('hide');
        });
    }).on("mouseleave", function () {
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(this).popover("hide");
        }
    }, 300);
});


Разметка

<a href="#" data-container="body" data-toggle="popover" data-placement="bottom">
    <i class="fa fa-star"></i> Fav
    <div class="popover-content hide">
        Некоторый контент
    </div>
</a>
  ui bootstrap bootstrap3 popover

Автор


dfatt
  • Репутация: 260
  • Сниппеты : 53
  • Ревизии : 7
Подписаться

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация