如何检查 twitter bootstrap popover 是否可见？

Question

我有一个元素$('#anElement') 附加了一个潜在的弹出框，比如

<div id="anElement" data-original-title="my title" data-trigger="manual" data-content="my content" rel="popover"></div>

我只是想知道如何检查弹出框是否可见：如何使用 jQuery 来完成？

Answer 1

如果此功能未内置到您使用的框架中（它不再是 twitter 引导程序，只是 bootstrap），那么您必须检查生成/修改为的 HTML创建 bootstrap 的这个特性。

看看popupver documentation。那里有一个按钮，您可以使用它来查看它的运行情况。这是检查在幕后工作的 HTML 元素的好地方。

打开你的 chrome 开发者工具或 firebug（firefox 的），看看它发生了什么。看起来按钮后面只插入了一个<div> -

<div class="popover fade right in" style="... />

您所要做的就是检查该元素是否存在。根据你的标记是如何编写的，你可以使用这样的东西 -

if ($("#popoverTrigger").next('div.popover:visible').length){
  // popover is visible
}

#popoverTrigger 是触发弹出框首先出现的元素，正如我们在上面注意到的，引导程序只是在元素之后附加弹出框 div。

Answer 2

boostrap popover 插件中没有明确实现的方法，因此您需要找到解决方法。这是一个无论插件是否可见都会返回 true 或 false 的 hack。

var isVisible = $('#anElement').data('bs.popover').tip().hasClass('in');
console.log(isVisible); // true or false

它访问实际上是Popover对象的popover插件存储的数据，调用该对象的tip()方法，该方法负责获取tip元素，然后检查返回的元素是否具有@987654324类@，表示附加到该元素的弹出框是可见的。

---

您还应该检查是否附加了弹出框，以确保您可以调用tip() 方法：

if ($('#anElement').data('bs.popover') instanceof Popover) {
  // do your popover visibility check here
}

Answer 3

在当前版本的 Bootstrap 中，您可以检查您的元素是否设置了aria-describedby。该属性的值是实际弹出框的id。

例如，如果你想改变可见弹出框的内容，你可以这样做：

var popoverId = $('#myElement').attr('aria-describedby');
$('#myElement').next(popoverid, '.popover-content').html('my new content');

Answer 4

这会检查给定的 div 是否可见。

if ($('#div:visible').length > 0)

或

if ($('#div').is(':visible'))

Answer 5

也许最可靠的选择是监听显示/隐藏事件，如下所示。这将消除深入挖掘可能容易出错的 DOM 的必要性。

var isMyPopoverVisible = false;//assuming popovers are hidden by default  

$("#myPopoverElement").on('shown.bs.popover',function(){
isMyPopoverVisible = true;
});

$("#myPopoverElement").on('hidden.bs.popover',function(){
isMyPopoverVisible = false;
});

即使您以编程方式隐藏/显示/切换弹出框，这些事件似乎也会被触发，而无需用户交互。

P。 S. 经 BS3 测试。

Answer 6

这是一个简单的 jQuery 插件来管理它。我添加了一些带注释的选项来展示访问对象的不同方法，并且没有注释我喜欢的方法。

对于当前的 Bootstrap 4.0.0，您可以使用 Popover.js 捆绑：https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js

// jQuery plugins
(function($)
{
    // Fired immiedately

    $.fn.isPopover = function (options)
    {
        // Is popover?
        // jQuery
        //var result = $(this).hasAttr("data-toggle");
        // Popover API
        var result = !!$(this).data('bs.popover');

        if (!options) return result;

        var $tip = this.popoverTip();

        if (result) switch (options)
        {
            case 'shown' :
                result = $tip.is(':visible');
                break;

            default:
                result = false;
        }

        return result;
    };    

    $.fn.popoverTip = function ()
    {
        // jQuery
        var tipId = '#' + this.attr('aria-describedby');
        return $(tipId);

        // Popover API by id
        //var tipId = this.data('bs.popover').tip.id;
        //return $(tipId);

        // Popover API by object
        //var tip = this.data('bs.popover').tip; // DOM element
        //return $(tip);
    };

    // Load indicator
    $.fn.loadIndicator = function (action)
    {
        var indicatorClass = 'loading';
        // Take parent if no container has been defined
        var $container = this.closest('.loading-container') || this.parent();

        switch (action)
        {
            case 'show' :
                $container.append($('<div>').addClass(indicatorClass));
                break;

            case 'hide' :
                $container.find('.' + indicatorClass).remove();
                break;
        }
    };
})(jQuery);

// Usage
// Assuming 'this' points to popover object (e.g. an anchor or a button)

// Check if popover tip is visible
var isVisible = $(this).isPopover('shown');

// Hide all popovers except this
if (!isVisible) $('[data-toggle="popover"]').not(this).popover('hide');

// Show load indicator inside tip on 'shown' event while loading an iframe content
$(this).on('shown.bs.popover', function ()
{
    $(this).popoverTip().find('iframe').loadIndicator('show');
});

Answer 7

这是一种使用 Vanilla JS 检查状态的方法。

document.getElementById("popover-dashboard").nextElementSibling.classList.contains('popover');

Answer 8

这适用于 BS4：

$(document).on('show.bs.tooltip','#anElement', function() {
    $('#anElement').data('isvisible', true);
});

$(document).on('hidden.bs.tooltip','#anElement', function() {
    $('#anElement').data('isvisible', false);
});


if ($('#anElement').data('isvisible'))
{
    // popover is visible
    $('#tipUTAbiertas').tooltip('hide');
    $('#tipUTAbiertas').tooltip('show');
}

Answer 9

使用带有 boostrap 4 的弹出框，tip() 似乎不再是一个函数。这是检查弹出框是否启用的一种方法，基本上是它是否已被单击并处于活动状态：

if ($('#element').data('bs.popover')._activeTrigger.click == true){
...do something
}