Tooltip

Mostrar aviso de información con el hover del mouse.

TIP

Este componente requiere el envoltorio <client-only></client-only> cuando se utiliza en SSR (por ejemplo: Nuxt) y SSG (por ejemplo: VitePress).

Uso básico

Tooltip tiene 9 colocaciones.

Temas

Tooltip tiene dos temas: dark y light.

TIP

Para utilizar un tema personalizado, tendrá que saber en dónde se renderiza la información, si el tooltip se procesa en el elemento raíz necesitará establecer la regla css globalmente.

Se recomienda que no utilice degradado lineal para el color de fondo cuando use el tema personalizado y que muestre la flecha al mismo tiempo, porque la flecha emergente y el contenido son dos elementos diferentes, el estilo de la flecha emergente debe establecerse individualmente, y cuando se trata del color de fondo con degradado, puede parecer un poco raro.

Más Contenido

Desplegar múltiples líneas de texto y establecer su formato.

Uso Avanzado

Además de los usos básicos, hay algunos atributos que le permiten personalización:

el atributo transition permite personalizar la animación con la que el Tooltip se muestra o se esconde, el valor por defecto es el-fade-in-linear.

el atributo disabled permite deshabilitar el tooltip. Solo es necesario definirlo como true.

De hecho, Tooltip es una extensión basada en ElPopper, puede usar cualquier atributo permitido en ElPopper.

TIP

El componente router-link no está soportado en tooltip, por favor use vm.$router.push.

Los elementos de formulario deshabilitados no son compatibles con Tooltip, se puede encontrar más información en MDN. Necesita envolver el elemento del formulario deshabilitado con un elemento contenedor para que la Tooltip funcione.

Contenido HTML

El atributo de contenido puede establecerse a cadena HTML.

WARNING

Aunque la propiedad content soporta cadenas HTML, renderizar HTML arbitrario en su sitio web puede ser muy peligroso porque puede llevar fácilmente a ataques XSS. Así que cuando raw-content está usándose, por favor asegúrese de que él content es de confianza, y nunca asigne a content contenido proporcionado por el usuario.

Activación virtual

A veces queremos renderizar la descripción en algún otro elemento disparador, podemos separar el disparador y el contenido.

TIP

El tooltip de activación virtual es un componente controlado, por lo que tendrá que controlar la visibilidad de la información por su cuenta, cuando esto suceda, NO PODRÁ cerrar el tooltip haciendo clic en otro lugar.

Singleton

La descripción también puede ser singleton, lo que significa que puede tener múltiples disparadores con una sola instancia de tooltip, esta función está implementada con base en Virtual triggering

TIP

Problema conocido: al usar singleton, la ventana emergente saldrá en lugares inesperados

Control

La descripción puede ser controlada por el componente padre, usando :visible puede implementar la vinculación de dos vías.

Animaciones

Tooltip puede ser animado de forma personalizada, puede configurar la función de animación como desee.

API

Atributos

Nombre	Descripción	Tipo	Por defecto
append-to	a qué elemento se agrega el CONTENT del tooltip	`CSSSelector` / `HTMLElement`	—
effect	Popover tiene dos temas: `dark` y `light`	`enum`	dark
content	contenido a mostrar, puede ser sobre-escrito por `slot#content`	`string`	''
raw-content	si `content` es tratado como cadena HTML	`boolean`	false
placement	posición del Tooltip	`enum`	bottom
fallback-placements	list of possible positions for Tooltip popper.js	`array`	—
visible / v-model:visible	visibilidad del Tooltip	`boolean`	—
disabled	saber si el Tooltip se encuentra deshabilitado	`boolean`	—
offset	offset del Tooltip	`number`	12
transition	nombre de animación	`string`	—
popper-options	parámetros popper.js	`object`refer to popper.js doc	{}
show-after	retraso de la aparición, en milisegundos	`number`	0
show-arrow	si el contenido de la descripción tiene una flecha	`boolean`	true
hide-after	retraso de la desaparición, en milisegundos	`number`	200
auto-close	tiempo de espera en milisegundos para ocultar el tooltip de forma automática	`number`	0
popper-class	nombre de clase personalizada para el popper del Tooltip	`string`	—
enterable	si el mouse puede entrar al Tooltip	`boolean`	true
teleported	si el contenido del tooltip es teletransportado, si es `true` será teletransportado a donde establezca `append-to`	`boolean`	true
trigger	Cómo debería activarse la descripción (para mostrar)	`enum`	hover
virtual-triggering	Indica si la activación virtual está habilitada	`boolean`	—
virtual-ref	Indica el elemento de referencia al que se adjunta el tooltip	`HTMLElement`	—
trigger-keys	Cuando hace clic en el ratón se enfoca en el elemento desencadenante, puede definir un conjunto de códigos de teclado para controlar la visualización de la descripción a través del teclado	`Array`	['Enter','Space']
persistent	cuando el tooltip este inactivo y `persistent` es `false`, el tooltip será destruido	`boolean`	—
aria-label a11y	igual que `aria-label` en nativo	`string`	—

Slots

Nombre	Descripción
default	Elemento de referencia & disparador del tooltip
content	contenido personalizado

Expuesto

Nombre	Descripción	Tipo
popperRef	instancia del componente el-popper	`object`
contentRef	instancia del componente el-tooltip-content	`object`
isFocusInsideContent	valida el evento de focus actual se activa dentro del contenido el-tooltip-content	`Function`
updatePopper	actualiza la instancia del componente el-popper	`Function`
onOpen	expone la función onOpen para manipular el estado abierto del tooltip	`Function`
onClose	expone la función onClose para manipular el estado abierto del tooltip	`Function`
hide	expone la función ocultar	`Function`

Fuente

Componentes • Documentación

Contribuidores

Popover

Divider

Tooltip #

Uso básico #

Temas #

Más Contenido #

Uso Avanzado #

Contenido HTML #

Activación virtual #

Singleton #

Control #

Animaciones #

API #

Atributos #

Slots #

Expuesto #

Fuente #

Contribuidores #