el popover de bootstrap no se muestra en la parte superior de todos los elementos

Estoy trabajando en un sitio de bootstrap y después de actualizar a bootstrap 2.2 desde 2.0 todo funcionó excepto el popover.

Los popovers todavía se muestran bien, pero no se muestran sobre todos los demás elementos.

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

¿Alguien tiene alguna idea de por qué cambió el comportamiento del popover o cómo puedo solucionarlo? Gracias.

Pude resolver el problema configurando data-container="body"el elemento html

HTML ejemplo:

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

JavaScript ejemplo:

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

Descubierto desde este enlace: https://github.com/twitter/bootstrap/issues/5889

Esto es trabajo para mí

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

Acabo de tener una situación similar a esta, que involucra la biblioteca DataTables JQuery con el desplazamiento habilitado.

Lo que resultó no tuvo nada que ver con los índices Z, sino con uno de los divs adjuntos que tienen la propiedad de desbordamiento de CSS configurada como oculta.

Lo arreglé agregando un evento a mi elemento que activó el popover, que también cambió la propiedad de desbordamiento del div responsable a visible.

La causa más probable es que el contenido que se muestra sobre el popover tiene una mayor z-index. Sin el código / estilo preciso, puedo ofrecer dos opciones:

Debe intentar identificar los elementos exactos con un inspector web (generalmente F12 en su navegador favorito) y verificar su z-index .

Si encuentra este valor, puede establecerlo más bajo que el popover que es z-index: 1010;por defecto

O el otro enfoque, no tan bueno, sería aumentar z-indexel popover. Puede hacerlo con los @zindexPopoverarchivos Less o directamente anulando

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

Si no puede encontrar una solución, intente reproducir el error en algo como este jsfiddle : probablemente resolverá el problema mientras intenta obtener el error.

Tuve un problema similar con 2 elementos fijos: aunque la heiraquía del índice z era correcta, la información sobre herramientas de arranque estaba oculta detrás del elemento con un índice z inferior.

Agregar data-container="body"resolvió el problema y ahora funciona como se esperaba.

Si data-container = "body" no funciona, pruebe otras dos propiedades:

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

El índice z debe ser el límite máximo.

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

Las respuestas anteriores fueron útiles ya que establecer el valor en el contenedor de datos hizo el trabajo, pero si configuro data-container = "body", entonces no se alinea correctamente en mi caso. Así que especifiqué la clase del div padre de popover y funcionó bien.

html

contenedor de datos = ". testDiv"

js

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

Esta mejor solución si está utilizando angular uib-bootsrap es utilizar la inyección de dependencia para $ uibTooltipProvider, puede cambiar la forma en que se comportan las sugerencias y los elementos emergentes de manera predeterminada para todas las sugerencias.

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

$ uibTooltipProvider A través de $ uibTooltipProvider, puede cambiar la forma en que se comportan las sugerencias sobre herramientas y los popovers de forma predeterminada; los atributos anteriores siempre tienen prioridad. Los siguientes métodos están disponibles:

setTriggers (obj) (Ejemplo: {'openTrigger': 'closeTrigger'}) - Extiende las asignaciones de activación predeterminadas mencionadas anteriormente con sus propias asignaciones.

opciones (obj): proporciona un conjunto de valores predeterminados para ciertos atributos de información sobre herramientas y popover. Actualmente es compatible con los que tienen la insignia C.

Muchos años después, pero como yo, otros pueden buscar esto. Teniendo en cuenta todas las actualizaciones, todo esto se puede resolver con las opciones de inicialización correctas, en JavaScript.

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

Esas configuraciones resolvieron todos los problemas de mayo. Tenía información sobre herramientas parpadeando, mostrando de manera central solo la mitad de los elementos en la página, saltando de arriba a izquierda continuamente, todo tipo de extrañeza. Pero con esa configuración todo está resuelto. Espero que ayude a cualquiera que busque.

Solo usando

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

podría no ser suficiente al mostrar popover sobre un modal BootstrapDialog, que también usa body como contenedor y tiene un índice z más alto.

Vengo con esta solución que usa elementos internos de Bootstrap3 (puede que no funcione con 2.x / 4.x) pero la mayoría de las instalaciones modernas de Bootstrap son 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 esta manera, diferentes popovers pueden tener un índice z diferente, algunos están bajo el modo BootstrapDialog, mientras que otros lo superan.

En mi caso, tuve que usar la opción de plantilla popover y agregar mi propia clase css a la plantilla 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

Cuando tenga algunos estilos en un elemento primario que interfieran con un popover, deberá especificar un contenedor personalizado para que el HTML del popover aparezca dentro de ese elemento.

Por ejemplo, digamos que el padre para un popover es body, entonces puedes usarlo.

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

Otro caso podría ser cuando popover se coloca dentro de algún otro elemento y desea mostrar popover sobre ese elemento, entonces deberá especificar ese elemento en el contenedor de datos. Por ejemplo: supongamos que tenemos popover dentro de un modal de arranque con id como 'modal-two', luego deberá establecer 'data-container' en 'modal-two'.

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

Podría tener que ver con la lista maestra del índice z en variables.less. En general, asegúrese de que su archivo variables.less sea correcto y esté actualizado.