popover bootstrap 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 a fonctionné sauf le popover.

Les popovers s'affichent toujours bien, mais ils n'apparaissent 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.

J'ai pu résoudre le problème en définissant data-container="body"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

Cela fonctionne pour moi

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

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

Ce qui s'est avéré n'avait rien à voir avec les indices Z, mais avec l'une des div englobantes ayant la propriété de dépassement de capacité CSS définie comme masquée.

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

La cause la plus probable est que le contenu affiché sur le popover a une valeur plus élevée z-index. Sans le code / style précis, je peux proposer deux options:

Vous devriez essayer d'identifier les éléments exacts avec un inspecteur Web (généralement F12 sur votre navigateur préféré) et vérifier leur valeur réelle 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 l'autre approche, moins bonne, serait d'augmenter z-indexle popover. Vous pouvez le faire soit avec le @zindexPopoverdans les fichiers Moins, 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, vous devriez essayer de reproduire le bogue dans quelque chose comme ce jsfiddle - vous résoudrez probablement le problème en essayant d'obtenir le bogue.

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

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

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

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

z-index doit être la limite maximale.

<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 définition de la valeur dans le conteneur de données a fait le travail, mais si je définis data-container = "body", cela ne s'aligne pas correctement dans mon cas. J'ai donc spécifié la classe de la div parent de popover et cela a bien fonctionné.

html

data-container = ". testDiv"

js

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

Cette meilleure solution si vous utilisez angular uib-bootsrap consiste à utiliser l'injection de dépendances pour $ uibTooltipProvider, vous pouvez modifier la façon dont les info-bulles et les popovers se comportent par défaut pour toutes les info-bulles.

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

$ uibTooltipProvider Grâce au $ uibTooltipProvider, vous pouvez changer la façon dont les info-bulles et les popovers se comportent par défaut; les attributs ci-dessus ont toujours la priorité. Les méthodes suivantes sont disponibles:

setTriggers (obj) (Exemple: {'openTrigger': 'closeTrigger'}) - Étend les mappages de déclencheurs 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-bulles et de popover. Supporte actuellement ceux avec le badge C.

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

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

Ces paramètres ont résolu tous les problèmes de mai. J'avais des info-bulles qui clignotaient, ne montrant correctement que la moitié des éléments de la page, sautant de haut en bas en continu, toutes sortes de bizarreries. Mais avec ces paramètres, tout est résolu. J'espère que cela aidera tous ceux qui cherchent.

Juste en utilisant

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

pourrait ne pas être suffisant lors de l'affichage de popover sur un modal BootstrapDialog, qui utilise également body comme conteneur et a un z-index plus élevé.

Je viens avec ce correctif qui utilise les composants internes de Bootstrap3 (peut ne pas fonctionner avec 2.x / 4.x) mais la plupart des installations modernes de 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);
    }
    // ...
});

De cette façon, différents popovers peuvent avoir différents z-index, certains sont sous le mode BootstrapDialog, tandis que d'autres sont au-dessus.

Dans mon cas, j'ai dû 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;
}

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

  $('[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

Lorsque certains styles d'un élément parent interfèrent avec un popover, vous souhaiterez spécifier un conteneur personnalisé afin que le HTML du popover apparaisse à la place dans cet élément.

Par exemple, disons que le parent d'un popover est body, alors vous pouvez l'utiliser.

    <a href="#" data-toggle="tooltip" data-container="body"> Popover One </a>

Un autre cas peut être lorsque le popover est placé à l'intérieur d'un autre élément et que vous souhaitez afficher le popover sur cet élément, vous devrez alors spécifier cet élément dans le conteneur de données. ex: Supposons que nous ayons un popover dans un modal bootstrap avec id comme «modal-two», alors vous devrez définir «data-container» sur «modal-two».

    <a href="#" data-toggle="tooltip" data-container="#modal-two"> Popover Two </a>

Cela pourrait avoir à voir avec la liste principale z-index sur variables.less. En général, assurez-vous que votre fichier variables.less est correct et à jour.