让Bootstrap的popover在鼠标移入弹窗时不消逝

2024年4月17日 202次阅读 来源: baofeng_song

运用bootstrap的popover，trigger设置为hover时，能够完成当鼠标安排到目的元素上时显现popover，但是没法完成当鼠标移动到popover上时不隐蔽popover，在网上找了下只找到一篇文章（链接），不好的是须要修正bootstrap的源代码，这不是我想要的，只好另寻它路。
厥后想到能够在hide.bs.popover事宜中运用event.preventDefault()来防备popover封闭，因而就想出了以下要领：

$(".hoverPopover").popover({
        template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div><h3 class="popover-title" style="border-bottom:none;"></h3></div>',
        html: true,
        trigger: "hover",
        placement: "top",
        delay: {hide: 100}
    }).on('shown.bs.popover', function (event) {
        var that = this;
        $(this).parent().find('div.popover').on('mouseenter', function () {
            $(that).attr('in', true);
        }).on('mouseleave', function () {
            $(that).removeAttr('in');
            $(that).popover('hide');
        });
    }).on('hide.bs.popover', function (event) {
        if ($(this).attr('in')) {
            event.preventDefault();
        }
    });

如今把鼠标移动到popover上时，popover不会隐蔽了。
重点：

  1. 对popover增添 delay: {hide: 100}，让hide事宜守候100毫秒再触发；

  2. 在shown.bs.popover事宜中为popover元素绑定鼠标事宜，在事宜中为popover触发元素增添或删除“in”属性；

  3. 在hide.bs.popover事宜中搜检触发元素是不是存在“in”属性，假如存在则作废隐蔽。

    原文作者：baofeng_song
    原文地址: https://segmentfault.com/a/1190000004884628
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞