Question

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

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

我只想知道如何检查popover是否可见：如何使用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是触发弹出窗口首先出现的元素，正如我们在上面注意到的那样，bootstrap只是在元素后面添加了popover div。

Answer 2

在boostrap popover插件中没有明确实现的方法，所以你需要找到解决方法。这是一个黑客，无论插件是否可见，它都将返回true或false。

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

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

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

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

Answer 3

检查给定的div是否可见。

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

或

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

Answer 4

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

因此，例如，如果要更改可见弹出窗口的内容，可以执行以下操作：

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

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的popover，tip（）似乎不再是一个函数。这是检查弹出窗口是否已启用的一种方法，基本上是单击它并且是否处于活动状态：

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

如何检查Twitter引导程序弹出窗口是否可见？

9 个答案: