web-dev-qa-db-fra.com

Comment vérifier si un popover bootstrap de Twitter est visible ou non?

J'ai un élément $('#anElement') avec un popover potentiel attaché, comme

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

J'aimerais juste savoir comment vérifier si le popover est visible ou non: comment cela peut-il être accompli avec jQuery?

javascriptjquerytwitter-bootstrap
32
Gombo

Si cette fonctionnalité n'est pas intégrée au framework que vous utilisez (ce n'est plus du bootstrap Twitter, mais du bootstrap ), vous devrez alors inspecter le code HTML généré/modifié pour le créer. fonctionnalité de bootstrap.

Jetez un coup d'œil à la documentation contextuelle . Il y a un bouton que vous pouvez utiliser pour le voir en action. C’est un endroit idéal pour inspecter les éléments HTML qui travaillent en coulisse.

Ouvrez vos outils de développement chrome ou firebug (de firefox) et regardez ce qui se passe. Il semble qu’il y ait simplement un <div> inséré après le bouton - 

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

Tout ce que vous devez faire est de vérifier l'existence de cet élément. Selon la manière dont votre balisage est écrit, vous pouvez utiliser quelque chose comme ceci -

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

#popoverTrigger est l'élément qui a déclenché l'apparition de ce popover et, comme nous l'avons vu plus haut, bootstrap ajoute simplement le div popover après l'élément.

46
Lix

Il n'y a pas de méthode implémentée explicitement dans le plugin boostrap popover, vous devez donc trouver un moyen de contourner ce problème. Voici un hack qui retournera vrai ou faux tant que le plugin sera visible ou pas.

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

Il accède aux données stockées par le plug-in popover qui est en fait un objet Popover, appelle la méthode tip() de l'objet qui est chargée d'extraire l'élément tip, puis vérifie si l'élément renvoyé a la classe in, ce qui indique que le popover est attaché. à cet élément est visible.

Vous devriez également vérifier si un popover est attaché pour vous assurer que vous pouvez appeler la méthode tip():

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

Ceci vérifie si le div donné est visible.

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

ou

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

Dans la version actuelle de Bootstrap, vous pouvez vérifier si votre élément a défini aria-describedby. La valeur de l'attribut est la id du popover réel. 

Ainsi, par exemple, si vous souhaitez modifier le contenu de la popover visible, vous pouvez faire:

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

L’option la plus fiable serait peut-être d’écouter les événements affichés/cachés, comme illustré ci-dessous. Cela éliminerait la nécessité de creuser profondément dans le DOM, ce qui pourrait être sujet à des erreurs. 

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

Ces événements semblent être déclenchés même si vous masquez/affichez/basculez le popover par programmation, sans interaction de l'utilisateur.

P. S. testé avec BS3.

1
Blasius Secundus

Voici un simple plugin jQuery pour gérer cela. J'ai ajouté quelques options commentées pour présenter différentes approches d'accès aux objets et laissé sans commentaire celle de ma faveur.

Pour la version actuelle de Bootstrap 4.0.0, vous pouvez combiner avec 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');
});
0
Krzysztof Przygoda