Tooltip

The v-tooltip component is useful for conveying information when a user hovers over an element. You can also programmatically control the display of tooltips through a v-model

Usage

Tooltips can wrap any element.

API

v-tooltip
Name
absolute
Default
false
Type
boolean

Position the element absolutely

Name
activator
Default
undefined
Type
any

Designate a custom activator when the activator slot is not used. String can be any valid querySelector and Object can be any valid Node

Name
allow-overflow
Default
false
Type
boolean

Removes overflow re-positioning for the content

Name
attach
Default
false
Type
any

Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.

Name
bottom
Default
false
Type
boolean

Align the component towards the bottom

Name
close-delay
Default
200
Type
number | string

Delay (in ms) after which menu closes (when open-on-hover prop is set to true)

Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
content-class
Default
undefined
Type
any

Applies a custom class to the detached element. This is useful because the content is moved to the end of the app and is not targettable by classes passed directly on the component.

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
debounce
Default
0
Type
number | string

Duration before tooltip is shown and hidden when hovered

Name
disabled
Default
false
Type
boolean

Disables the tooltip

Name
fixed
Default
true
Type
boolean

Position the element fixed

Name
input-activator
Default
false
Type
boolean

Sets a new activator target for the detached element. Use when placing detachable items in v-input slots

Name
lazy
Default
false
Type
boolean

Conditionally renders content on mounted. Will only render content if activated

Name
left
Default
false
Type
boolean

Align the component towards the left

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
max-width
Default
auto
Type
number | string

Sets the maximum width for the content

Name
min-width
Default
undefined
Type
number | string

Sets the minimum width for the content

Name
nudge-bottom
Default
0
Type
number | string

Nudge the content to the bottom

Name
nudge-left
Default
0
Type
number | string

Nudge the content to the left

Name
nudge-right
Default
0
Type
number | string

Nudge the content to the right

Name
nudge-top
Default
0
Type
number | string

Nudge the content to the top

Name
nudge-width
Default
0
Type
number | string

Nudge the content width

Name
offset-overflow
Default
false
Type
boolean

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

Name
open-delay
Default
200
Type
number | string

Delay (in ms) after which menu opens (when open-on-hover prop is set to true)

Name
position-x
Default
undefined
Type
number

Used to position the content when not using an activator slot

Name
position-y
Default
undefined
Type
number

Used to position the content when not using an activator slot

Name
right
Default
false
Type
boolean

Align the component towards the right

Name
tag
Default
'span'
Type
string

Specifies a custom tag for the activator wrapper

Name
top
Default
false
Type
boolean

Align the content towards the top

Name
transition
Default
undefined
Type
string

Sets the component transition. Can be one of the built in transitions or your own.

Name
value
Default
undefined
Type
any

Controls visibility

Name
z-index
Default
undefined
Type
any

The z-index used for the component

Examples

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