Wie überprüfe ich, ob ein Twitter-Bootstrap-Popover sichtbar ist oder nicht?

Lesezeit: 6 Minuten

Benutzer-Avatar
Gombo

Ich habe ein Element $('#anElement') mit einem potenziellen Popover angehängt, wie z

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

Ich würde nur gerne wissen, wie ich überprüfen kann, ob das Popover sichtbar ist oder nicht: Wie kann dies mit jQuery erreicht werden?

  • Bitte geben Sie mehr Aufschlag an.

    – Bram Vanroy

    18. November 2012 um 17:43 Uhr

  • @bram – unter normalen Umständen würde ich dir von ganzem Herzen zustimmen. In diesem Fall ist das Markup jedoch das standardmäßige Bootstrap-Markup (Twitter).

    – Lix

    18. November 2012 um 18:00 Uhr

  • @Lix Für Leute, die mit Bootstrap nicht vertraut sind, kann es nützlich sein, eine Vorstellung davon zu haben, wie das Markup aussieht

    – Bram Vanroy

    18. November 2012 um 19:54 Uhr

  • Ihr habt beide Recht: Bram hat um etwas mehr Markup gebeten, da die ursprüngliche Frage -zumindest- sehr kurz war! Auf der anderen Seite ist es für Leute gedacht, die mit dem Bootstrap ein wenig vertraut sind.

    – Gombo

    18. November 2012 um 20:04 Uhr

  • Sie können auch anhand einer Bedingung prüfen $('#anElement').next().hasClass('popover') was true zurückgibt, wenn das Popover eingeschaltet ist.

    – Eugene Josef

    12. Februar 2014 um 5:26 Uhr

Wenn diese Funktionalität nicht in das von Ihnen verwendete Framework integriert ist (es ist nicht mehr zwitschern Bootstrap, einfach Bootstrap), dann müssen Sie den HTML-Code untersuchen, der generiert/geändert wird, um diese Bootstrap-Funktion zu erstellen.

Werfen Sie einen Blick auf die Popupver-Dokumentation. Es gibt dort eine Schaltfläche, mit der Sie es in Aktion sehen können. Dies ist ein großartiger Ort, um die HTML-Elemente zu inspizieren, die hinter den Kulissen am Werk sind.

Öffnen Sie Ihre Chrome-Entwicklertools oder Firebug (von Firefox) und sehen Sie sich an, was passiert. Es sieht so aus, als gäbe es einfach a <div> wird nach dem Button eingefügt –

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

Alles, was Sie tun müssten, ist zu prüfen, ob dieses Element vorhanden ist. Abhängig davon, wie Ihr Markup geschrieben ist, könnten Sie so etwas verwenden –

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

#popoverTrigger ist das Element, das dieses Popover überhaupt erst ausgelöst hat, und wie wir oben bemerkt haben, hängt Bootstrap einfach das Popover-Div nach dem Element an.

  • Ja vielleicht. Kann nicht scheinen, es richtig zu debuggen. Verwenden des IE9-Debuggers im IE8-Modus, aber es werden keine Änderungen am DOM angezeigt, während das Popover sichtbar ist.

    – Hofnarwillie

    9. Mai 2013 um 16:53 Uhr

  • +1 Ich wollte den Tooltip aktualisieren, während er angezeigt wurde, und dies ist eine wirklich gute Möglichkeit, um zu überprüfen, ob der Tooltip angezeigt, ausgeblendet, aktualisiert und angezeigt wird. Danke

    – 2sb

    14. Juni 2013 um 17:26 Uhr


  • Zu Ihrer Information, wenn Sie die Demo von Bootstrap kopieren / einfügen, funktioniert es nicht, weil sie die verwenden data-container="body" also das div geht nicht mit #popover-trigger Element.

    – Markus

    21. Oktober 2015 um 17:07 Uhr


  • @Marc – 3 Jahre alter Code, der eine aktuelle Bibliothek verwendet, ist zwangsläufig problematisch. Ich glaube nicht, dass Bootstrap von vor 3 Jahren abwärtskompatibel ist. Ich kann mich nicht wirklich erinnern, welche Version ich verwendet habe, als ich diese Antwort geschrieben habe … Es wäre jedoch definitiv eine gute Idee, die spezifische Version zu erwähnen …

    – Lix

    21. Oktober 2015 um 18:27 Uhr


  • Es gibt kein Problem mit Ihrer Antwort, es funktioniert mit der neuesten Version. Sie müssen nur die entfernen data-container oder verwenden Sie einen anderen Selektor für die next(). Ich wollte es nur erwähnen

    – Markus

    21. Oktober 2015 um 18:32 Uhr


Benutzer-Avatar
Bogdan

Es gibt keine Methode, die explizit im Boostrap-Popover-Plugin implementiert ist, also müssen Sie einen Weg finden, das zu umgehen. Hier ist ein Hack, der wahr oder falsch zurückgibt, unabhängig davon, ob das Plugin sichtbar ist oder nicht.

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

Es greift auf die vom Popover-Plugin gespeicherten Daten zu, bei denen es sich tatsächlich um a Popover Objekt, ruft das Objekt auf tip() -Methode, die für das Abrufen des tip-Elements verantwortlich ist, und prüft dann, ob das zurückgegebene Element die Klasse hat inwas darauf hinweist, dass das an dieses Element angehängte Popover sichtbar ist.


Sie sollten auch überprüfen, ob ein Popover angehängt ist, um sicherzustellen, dass Sie anrufen können tip() Methode:

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

  • BOOTSTRAP 3 HINWEIS: In BS3 wurde es in bs.popover statt popover geändert. Beispiel : $('#anElement').data('bs.popover')

    – Kyle

    16. Oktober 2013 um 0:03 Uhr

  • Vielen Dank für diese Lösung, aber das ist immer noch ein Hack. Ich stoße auf diese Notwendigkeit, weil hide das HTML-DOM nicht richtig bereinigt, während toggle dies tut.

    – Ido Ran

    12. Dezember 2013 um 9:56 Uhr

In der aktuellen Version von Bootstrap können Sie überprüfen, ob Ihr Element dies hat aria-describedby einstellen. Der Wert des Attributs ist der id des eigentlichen Popovers.

Wenn Sie beispielsweise den Inhalt des sichtbaren Popovers ändern möchten, können Sie Folgendes tun:

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

Benutzer-Avatar
KingKongFrog

Dies prüft, ob das angegebene div sichtbar ist.

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

oder

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

Die vielleicht zuverlässigste Option wäre das Abhören von angezeigten/versteckten Ereignissen, wie unten gezeigt. Dies würde die Notwendigkeit beseitigen, tief in das DOM einzudringen, was fehleranfällig sein könnte.

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;
});

Diese Ereignisse scheinen auch dann ausgelöst zu werden, wenn Sie das Popover programmgesteuert ohne Benutzerinteraktion ausblenden/anzeigen/umschalten.

PS getestet mit BS3.

Hier ist ein einfaches jQuery-Plugin, um dies zu verwalten. Ich habe einige kommentierte Optionen hinzugefügt, um verschiedene Ansätze für den Zugriff auf Objekte zu präsentieren, und die meiner Wahl unkommentiert gelassen.

Für aktuelles Bootstrap 4.0.0 kann man Bundle mit nehmen 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');
});

Benutzer-Avatar
Gustav Lastra

Hier eine Möglichkeit, den Status mit Vanilla JS zu überprüfen.

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

1215960cookie-checkWie überprüfe ich, ob ein Twitter-Bootstrap-Popover sichtbar ist oder nicht?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy