Saltar al contenido

Popper.js posición inicial incorrecta del menú desplegable/información sobre herramientas

Recuerda que en las ciencias cualquier problema casi siempere suele tener diferentes soluciones, pero te compartimos lo más óptimo y mejor.

Solución:

Esto se debe a que Popper.js necesita que el elemento popper se represente en el DOM (también conocido como tener una posición en el documento) para poder calcular correctamente su posición.

Está inicializando Popper.js cuando el elemento está oculto y luego alterna su visibilidad para mostrarlo, pero Popper.js no sabe que algo cambió.

Cuando desplaza la página o cambia su tamaño, Popper.js actualiza la posición de su popper porque escucha estos eventos de manera predeterminada.

Debe ejecutar manualmente catsTooltip.scheduleUpdate() después .toggle() para tenerlo bien posicionado.

Solo quería compartir lo que hice para que el mío funcione, en caso de que ayude a alguien más.

Creo que las soluciones de @Fez y @Abdalla aún podrían ser útiles, pero para mí tuvo que ver con el uso accidental display: none; para mi contenedor de información sobre herramientas. Increíble lo que la documentación puede hacer jajaja.

Entonces, lo que hice con mi contenedor .tooltip es esto:

/* Hide the popper when the reference is hidden */
.tooltip[data-popper-reference-hidden] 
  visibility: hidden;
  pointer-events: none;


.tooltip 
  // display: none; <---- don't do this 
  opacity: 1; // do this

  background-color: white;
  border: 1px solid #c6c6c6;
  box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.2);
  line-height: 1.5;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: -1; // this keeps it from blocking other elements when it's hidden

  &:hover 
    visibility: visible;
    pointer-events: auto;
    opacity: 1; // oh yeah 
    z-index: 1;
  

Si piensas que ha resultado de ayuda este post, sería de mucha ayuda si lo compartes con más desarrolladores de esta manera nos ayudas a extender esta información.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada.