Tooltip

El componente v-tooltip resulta útil para transmitir información cuando un usuario pasa el mouse por encima de un elemento. Puedes también controlar el despliegue de los tooltips programáticamente a través del uso de v-model

Uso

Tooltips can wrap any element.

API

v-tooltip
Nombre
absolute
Default
false
Type
boolean

Posiciona el elemento como absolute

Nombre
activator
Default
undefined
Type
any

Denota un activador personalizado para cuando el slot activador no se utiliza. String puede ser cualquier querySelector válido y Object puede ser cualquier Node válido.

Nombre
allow-overflow
Default
false
Type
boolean

Quita el reposicionamiento overflow para el componente.

Nombre
attach
Default
false
Type
any

Especifica de cuál elemento del DOM debe soltarse este componente. Utiliza ya sea un selector de CSS o una referencia del objeto que apunta al elemento.

Nombre
bottom
Default
false
Type
boolean

Alínea el componente hacia abajo

Nombre
close-delay
Default
200
Type
number | string

Tiempo de espera (en ms) después del cual el menú se cierra (cuando la prop open-on-hover está puesta en true)

Nombre
color
Default
undefined
Type
string

Aplica el color especificado al control.

Nombre
content-class
Default
undefined
Type
any

Aplica una clase personalizada al elemento que se soltó. Esto es útil porque el contenido se mueve al final de la app y no puede ser alcanzable por las clases que se pasan directamente al componente.

Nombre
dark
Default
false
Type
boolean

Components.Tooltips.

Nombre
debounce
Default
0
Type
number | string

Tiempo de duración antes de que el tooltip se muestre y esconda cuando se pasa el mouse por enicma

Nombre
disabled
Default
false
Type
boolean

Components.Tooltips.

Nombre
fixed
Default
true
Type
boolean

Posiciona el elemento como fixed

Nombre
input-activator
Default
false
Type
boolean

Components.Tooltips.

Nombre
lazy
Default
false
Type
boolean

Renderiza el contenido condicionalmente en el lifecycle hook mounted. Sólo renderizará el contenido si es activado.

Nombre
left
Default
false
Type
boolean

Alínea el componente hacia la izquierda

Nombre
light
Default
false
Type
boolean

Components.Tooltips.

Nombre
max-width
Default
auto
Type
number | string

Configura el ancho máximo para el componente.

Nombre
min-width
Default
undefined
Type
number | string

Configura el ancho mínimo para el componente.

Nombre
nudge-bottom
Default
0
Type
number | string

Empujar el contenido hasta la parte de abajo.

Nombre
nudge-left
Default
0
Type
number | string

Nudge the content to the left

Nombre
nudge-right
Default
0
Type
number | string

Nudge the content to the right

Nombre
nudge-top
Default
0
Type
number | string

Nudge the content to the top

Nombre
nudge-width
Default
0
Type
number | string

Nudge the content width

Nombre
offset-overflow
Default
false
Type
boolean

Causes the component to flip to the opposite side when repositioned due to overflow

Nombre
open-delay
Default
200
Type
number | string

Tiempo de espera (en ms) después del cual el menú se abre (cuando la prop open-on-hover está puesta en true)

Nombre
position-x
Default
undefined
Type
number

Used to position the content when not using an activator slot

Nombre
position-y
Default
undefined
Type
number

Used to position the content when not using an activator slot

Nombre
right
Default
false
Type
boolean

Alínea el componente hacia la derecha

Nombre
tag
Default
'span'
Type
string

Components.Tooltips.

Nombre
top
Default
false
Type
boolean

Alínea el componente hacia arriba

Nombre
transition
Default
undefined
Type
string

Components.Tooltips.

Nombre
value
Default
undefined
Type
any

Controla la visibilidad

Nombre
z-index
Default
undefined
Type
any

The z-index used for the component

Ejemplos

Alignment

Tooltip can be aligned to any of the four sides of the activator element

Visibility

Tooltip visibility can be programmatically changed using v-model.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore