La popover de bootstrap n'apparaît pas en haut de tous les éléments

Question

Je travaille sur un site bootstrap et après la mise à jour de la version 2.0 à bootstrap 2.2, tout a fonctionné sauf le popover.

Les popovers s'affichent toujours bien, mais ils ne s'affichent 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 a-t-il une idée de la raison pour laquelle le comportement du popover a changé, ou comment je peux y remédier ? Merci.

Answer 1

J'ai pu résoudre le problème en mettant 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

Answer 2

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

Ce qui s'est avéré n'avait rien à voir avec les indices Z, mais avec l'une des divisions englobantes dont la propriété CSS overflow était définie comme cachée.

J'ai résolu le problème en ajoutant un événement à mon élément déclenchant le popover, ce qui a également changé la propriété overflow de la div responsable en visible.

Answer 3

La cause la plus probable est que le contenu qui s'affiche au-dessus du popover a une valeur plus élevée. z-index . Sans le code/style précis, je peux proposer deux options :

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

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

---

Ou bien l'autre approche, moins bonne, serait d'augmenter la z-index du popover. Vous pouvez le faire soit avec l'option @zindexPopover dans les fichiers Less ou directement en surchargeant les fichiers

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

---

Si vous ne trouvez pas de solution, vous devriez essayer de reproduire le bogue dans quelque chose comme ce jsfiddle - vous résoudrez probablement le problème tout en essayant d'obtenir le bug.

Answer 4

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

Ajout de data-container="body" a résolu le problème et fonctionne maintenant comme prévu.

Answer 5

Cela pourrait avoir un rapport avec la liste maîtresse des z-index dans variables.less. En général, assurez-vous que votre fichier variables.less est correct et à jour.