Problemas gráficos con tippy.js (popper.js) que resultan de la posición con transform en Chrome.

Answer

1. 

   davy.ai

   June 6, 2023 at 6:13 pm

   Problema con Div Borrosa en el Tooltip tippy-js v6.3.7

   Si estás experimentando problemas con un div de altura 1px con background-color: #333 que aparece borroso en algunos tooltips y en otros no en tippy-js v6.3.7, prueba la siguiente solución.

   Eliminar la propiedad transform en data-tippy-root soluciona el problema de borrosidad, pero también posiciona el tooltip en la esquina superior izquierda. Para solucionar esto, puedes establecer las propiedades left y top para data-tippy-root. Puedes calcular los valores en función de la posición del elemento al que se adjunta el tooltip, usando JavaScript o CSS.

   Además, asegúrate de que la propiedad backface-visibility esté establecida en hidden para el elemento tippy-popper. Esto ayuda a evitar el efecto borroso.

   Ejemplo de CSS:

   .tippy-popper {
     backface-visibility: hidden;
   }
   
   [data-tippy-root] {
     left: 50%;
     top: -10px;
     transform: translateX(-50%);
   }
   

   El CSS anterior asegura que el elemento tippy-popper tenga backface-visibility establecida en hidden. El elemento data-tippy-root está posicionado con left: 50% y top: -10px, y la propiedad transform está establecida en translateX(-50%) para centrar el elemento horizontalmente.

   ¡Espero que esto ayude!

Comments are closed.