web-dev-qa-db-fra.com

bootstrap popover ne s'affiche pas au-dessus de tous les éléments

Je travaille sur un site bootstrap et, après la mise à jour vers bootstrap 2.2 à partir de 2.0, tout fonctionnait sauf le popover.

Les popovers apparaissent toujours bien, mais ils ne figurent pas au-dessus de tous les autres éléments.

<div> // this sits on top of the popover. this did not happen before cleaning up scripts.
     <div>  //popover shows on top of this
          <div> //popover shows on top of this
               //link here with popover in it.
          </div>
     </div>
</div>

Quelqu'un sait-il pourquoi le comportement de la popover a changé ou comment je peux le corriger? Merci.

javascripthtmltwitter-bootstrappopover
122
Kyle

J'ai pu résoudre le problème en définissant data-container="body" sur l'élément html

HTML exemple: 

<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
    hover over me
</a>

JavaScript exemple: 

$('your element').tooltip({ container: 'body' })

Découvert à partir de ce lien: https://github.com/Twitter/bootstrap/issues/5889

353
Kyle

Cela fonctionne pour moi

$().popover({container: 'body'})
42
Saqib R.

Je viens d'avoir une situation semblable à celle-ci, impliquant la bibliothèque DataTables JQuery avec le défilement activé.

Ce qui s’est avéré n’avoir rien à voir avec les indices Z, mais avec l’un des divs englobants dont la propriété de dépassement de CSS est définie comme étant masquée.

Je l'ai corrigé en ajoutant un événement à mon élément déclenchant le popover qui modifiait également la propriété de débordement de la div responsable en visible.

22
Dologan

La cause la plus probable est que le contenu affiché par-dessus le popover a un z-index supérieur. Sans le code/style précis, je peux offrir deux options:

Vous devriez essayer de localiser les éléments exacts avec un inspecteur Web (généralement F12 sur votre navigateur préféré) et de vérifier leur z-index réel.

Si vous trouvez cette valeur, vous pouvez la définir plus basse que le popover qui est z-index: 1010; par défaut

Ou bien l’autre approche, moins bonne, consisterait à augmenter le z-index de la popover. Vous pouvez le faire soit avec @zindexPopover dans les fichiers Less, soit directement en remplaçant

.popover {
    z-index: 1010; /* A value higher than 1010 that solves the problem */
}

Si vous ne trouvez pas de solution, essayez de reproduire le bogue dans quelque chose comme this jsfiddle - vous pourrez probablement résoudre le problème tout en essayant d’obtenir le bogue.

15
Sherbrow

J'ai eu un problème similaire avec 2 éléments fixes - même si l'héritage de z-index était correct, l'info-bulle bootstrap était cachée derrière l'élément avec un z-index inférieur.

L'ajout de data-container="body" a résolu le problème et fonctionne désormais comme prévu.

11
Charl Kruger

Si data-container = "body" ne fonctionne pas, essayez deux autres propriétés:

data-container="body" style="z-index:1000; position:relative"

z-index devrait être limite maximum.

7
Nalan Madheswaran
<div class="testDiv">
<a tabindex = "-1" id="testPop" title="stuff" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-container=".testDiv">
 <i class="fa fa-info-circle"></i>
</a>

</div>

Les réponses ci-dessus ont été utiles, car la valeur dans Data-Container a bien fonctionné, mais si j'ai défini data-container = "body", il ne s'alignera pas correctement dans mon cas. J'ai donc spécifié la classe de la division parent de popover et cela a bien fonctionné.

html

data-container = ". testDiv"

js

$ ("# testPop"). popover ({conteneur: '.testDiv'})

5
Novice_JS

Si vous utilisez angular uib-bootsrap, la meilleure solution consiste à utiliser l'injection de dépendance pour $ uibTooltipProvider. Vous pouvez modifier le comportement par défaut des info-bulles et des popovers de toutes les info-bulles.

$uibTooltipProvider.options({
  appendToBody: true
});

$ uibTooltipProvider Grâce à $ uibTooltipProvider, vous pouvez modifier le comportement par défaut des info-bulles et des popovers. les attributs ci-dessus ont toujours la priorité. Les méthodes suivantes sont disponibles:

setTriggers (obj) (Exemple: {'openTrigger': 'closeTrigger'}) - Étend les mappages de déclencheur par défaut mentionnés ci-dessus avec vos propres mappages.

options (obj) - Fournit un ensemble de valeurs par défaut pour certains attributs d'info-bulle et de popover. Supporte actuellement ceux avec le badge C.

2
Enkode

Plusieurs années plus tard, mais comme moi, d'autres peuvent rechercher cela. Toutes les mises à jour prenant en compte, tout cela peut être résolu avec les options d’initialisation appropriées, en JavaScript.

$('.tip').tooltip({
    boundary: 'viewport',
    placement: 'top',
    container:'body',
    sanitize: true,
    appendToBody: true
});

Ces paramètres résolus tous peuvent problèmes. J'avais des info-bulles qui scintillaient, ne montrant correctement que la moitié des éléments de la page, sautant continuellement du haut vers la gauche, toutes sortes de sottises. Mais avec ces paramètres, tout est résolu. J'espère que ça aidera ceux qui cherchent.

1
Lucian Minea
Problem solved with data-container="body" and z-index
1->
<div class="button btn-align"
data-container="body"  
data-toggle="popover"
data-placement="top"
title="Top"
data-trigger="hover"
data-title-backcolor="#fff"
data-content="A top aligned popover is a really boring thing in the real 
life.">Top</div>
2->
.ggpopover.in {
z-index: 9999 !important;
}
1
ecalimac

Juste en utilisant

$().popover({container: 'body'})

pourrait ne pas suffire lors de l'affichage du survol sur un modal BootstrapDialog, qui utilise également body en tant que conteneur et possède un index z supérieur.

Je viens avec ce correctif qui utilise les composants internes de Bootstrap3 (peut ne pas fonctionner avec les versions 2.x/4.x), mais la plupart des installations modernes Bootstrap sont 3.x.

self.$anchor.on('shown.bs.popover', function(ev) {
    var tipCSS = self.$anchor.data('tipCSS');
    if (tipCSS !== undefined) {
        self.$anchor.data('bs.popover').$tip.css(tipCSS);
    }
    // ...
});

Ainsi, différents popovers peuvent avoir différents z-index, certains sont sous modal BootstrapDialog, tandis que d'autres sont au-dessus.

0
Dmitriy Sintsov
  $('[data-toggle="popover"]').popover({
        placement: 'top',
        boundary: 'viewport',
        trigger: 'hover',
        html: true,
        content: function () {
            let content = $(this).attr("data-popover-content");
            return $(content).html();
        }
    });,



`placement`: 'top',
`boundary`: 'viewport'
both needed
0
Ajay

Dans mon cas, je devais utiliser l'option de modèle popover et ajouter ma propre classe css au modèle html:

        $("[data-toggle='popover']").popover(
          {
            container: 'body',
            template: '<div class="popover top-modal" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
       });

Css:

.top-modal {
  z-index: 99999;
}
0
mortenma71