Tooltip V2
Para el tooltip existente, hay demasiadas opciones en la API que no son muy intuitivas y accesibles, así que creamos este tooltip mucho más simple, que hace solo una cosa simple - mostrar el tooltip. La estructura del tooltip es la misma, pero la API es diferente. En esta versión hemos proporcionado los componentes individualmente, usted puede componer su propio tooltip usando los componentes.
Uso básico
Hover o tab en el icono para ver la descripción.
Tooltip accesible
Transition / Animation
Puede establecer transición/animación a través de código CSS
con animación/transición nativa CSS o con la transición de los componentes para su contenido de tooltip al abrir.
TIP
De forma predeterminada, tooltip v2 SOLO permite una transición/animación a medio camino que solo ocurre cuando se muestra el tooltip. Esto se debe a que la implementación usa v-if
para mostrar/ocultar el tooltip. Al cerrar, el contenido del elemento se elimina del DOM, por lo que la transición / animación se interrumpe.
Transición completa
Por supuesto, puede tener una transición completa para el contenido de su tooltip. Pero esto requiere usar el componente Transition, verifique la demostración a continuación.
Procesar al elemento raíz
Por defecto, a diferencia de tooltip v1, el tooltip será procesada en el body. tooltip v2 renderizará donde está el elemento disparador/referencia. Pero todavía puede renderizar al elemento raíz usando el componente Teleport
.
Con flecha
Fuente
Componentes • Style • Documentación