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

Basic tooltip content

Fuente

ComponentesStyleDocumentación

Contribuidores