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

How to check whether a twitter bootstrap popover is visible or not?

提问by Gombo

I have an element $('#anElement')with a potential popover attached, like

我有一个$('#anElement')带有潜在弹出框的元素，例如

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

I just would like to know how to check whether the popover is visible or not: how this can be accomplished with jQuery?

我只是想知道如何检查弹出窗口是否可见：如何使用 jQuery 完成此操作？

回答by Lix

If this functionality is not built into the framework you are using (it's no longer twitterbootstrap, just bootstrap), then you'll have to inspect the HTML that is generated/modified to create this feature of bootstrap.

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

Take a look at the popupver documentation. There is a button there that you can use to see it in action. This is a great place to inspect the HTML elements that are at work behind the scene.

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

Crack open your chrome developers tools or firebug (of firefox) and take a look at what it happening. It looks like there is simply a <div>being inserted after the button -

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

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

All you would have to do is check for the existence of that element. Depending on how your markup is written, you could use something like this -

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

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

#popoverTriggeris the element that triggered that popover to appear in the first place and as we noticed above, bootstrap simply appends the popover div after the element.

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

回答by Bogdan

There is no method implemented explicitly in the boostrap popover plugin so you need to find a way around that. Here's a hack that will return true or false wheter the plugin is visible or not.

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

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

It accesses the data stored by the popover plugin which is in fact a Popoverobject, calls the object's tip()method which is responsible for fetching the tip element, and then checks if the element returned has the class in, which is indicative that the popover attached to that element is visible.

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

---

---

You should also check if there is a popover attached to make sure you can call the tip()method:

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

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

回答by KingKongFrog

This checks if the given div is visible.

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

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

or

或者

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

回答by Andreas Finne

In the current version of Bootstrap, you can check whether your element has aria-describedbyset. The value of the attribute is the idof the actual popover.

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

So for instance, if you want to change the content of the visible popover, you can do:

因此，例如，如果您想更改可见弹出框的内容，您可以执行以下操作：

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

回答by Blasius Secundus

Perhaps the most reliable option would be listening to shown/hidden events, as demonstrated below. This would eliminate the necessity of digging deep into the DOM that could be error prone.

也许最可靠的选择是监听显示/隐藏的事件，如下所示。这将消除深入挖掘可能容易出错的 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;
});

These events seem to be triggered even if you hide/show/toggle the popover programmatically, without user interaction.

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

P. S. tested with BS3.

PS 用 BS3 测试。

回答by Krzysztof Przygoda

Here is simple jQuery plugin to manage this. I've added few commented options to present different approaches of accessing objects and left uncommented that of my favor.

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

For current Bootstrap 4.0.0 you can take bundle with Popover.js: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js

对于当前的 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');
});

回答by Gustavo Lastra

Here a way to check the state with Vanilla JS.

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

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

回答by eaton9000

Using a popover with boostrap 4, tip() doesn't seem to be a function anymore. This is one way to check if a popover is enabled, basically if it has been clicked and is active:

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

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