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
API
Position the element absolutely
Designate a custom activator when the activator slot is not used. String can be any valid querySelector and Object can be any valid Node
Removes overflow re-positioning for the content
Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.
Align the component towards the bottom
Delay (in ms) after which menu closes (when open-on-hover prop is set to true)
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)
)
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.
Applies the dark theme variant
Duration before tooltip is shown and hidden when hovered
Disables the tooltip
Position the element fixed
Sets a new activator target for the detached element. Use when placing detachable items in v-input
slots
Conditionally renders content on mounted. Will only render content if activated
Align the component towards the left
Applies the light theme variant
Sets the maximum width for the content
Sets the minimum width for the content
Nudge the content to the bottom
Nudge the content to the left
Nudge the content to the right
Nudge the content to the top
Nudge the content width
Causes the component to flip to the opposite side when repositioned due to overflow
Delay (in ms) after which menu opens (when open-on-hover prop is set to true)
Used to position the content when not using an activator slot
Used to position the content when not using an activator slot
Align the component towards the right
Specifies a custom tag for the activator wrapper
Align the content towards the top
Sets the component transition. Can be one of the built in transitions or your own.
Controls visibility
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
.