javascript - bootstrap tooltip js

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

Question

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

Los popovers todavía se muestran bien, pero no aparecen encima de 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 sobre por qué cambió el comportamiento del popover o cómo puedo solucionarlo? Gracias.

Answer 1

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

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

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

Answer 2

En mi caso, tuve que usar la opción de plantilla de 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;
}

Answer 3

Esta es la mejor solución si usa angular uib-bootsrap es Usar inyección de dependencia para $ uibTooltipProvider, puede cambiar la forma en que la información sobre herramientas y los elementos interactivos se comportan de manera predeterminada para todas las sugerencias.

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

$ uibTooltipProvider A través del $ uibTooltipProvider, puede cambiar la forma en que se comportan los tooltips y popovers por defecto; los atributos anteriores siempre tienen prioridad. Los siguientes métodos están disponibles:

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

options (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.

Answer 4

Esto es trabajo para mí

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

Answer 5

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

Debería intentar localizar los elementos exactos con un inspector web (generalmente F12 en su navegador favorito) y verificar su z-index real.

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

O el otro enfoque, no tan bueno, sería aumentar el z-index del popover. Puede hacerlo con el @zindexPopover en los archivos 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 al intentar obtener el error.

Answer 6

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

Answer 7

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

Ejemplo HTML :

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

Ejemplo de JavaScript :

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

Descubierto a partir de este enlace: https://github.com/twitter/bootstrap/issues/5889

Answer 8

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

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

z-index debe ser el límite máximo.

Answer 9

Solo usando

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

podría no ser suficiente cuando se muestre popover en un modal de BootstrapDialog, que también usa cuerpo como contenedor y tiene un índice Z más alto.

Vengo con esta solución que utiliza internos de Bootstrap3 (puede no funcionar 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 este modo, diferentes popovers pueden tener diferentes índices Z, algunos están bajo el modal BootstrapDialog, mientras que otros están sobre el mismo.

Answer 10

Tuve un problema similar con 2 elementos fijos: aunque la heiraquía del índice Z era correcta, la información sobre herramientas del programa de arranque se ocultaba detrás del elemento con un índice z más bajo.

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

Answer 11

<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 el valor de configuración en 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 principal de popover y funcionó bien.

html

data-container = ". testDiv"

js

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