VTooltip API

Props

name	type	default
`activator`	Element \| (string & {}) \| 'parent' \| ComponentPublicInstance	undefined
Explicitly sets the overlay’s activator.
`activator-props`	unknown	{}
Apply custom properties to the activator.
`attach`	string \| boolean \| Element	false
Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default.
`close-delay`	string \| number	undefined
Delay (in ms) after which menu closes (when open-on-hover prop is set to true).
`close-on-back`	boolean	false
Closes the overlay content when the browser’s back button is pressed or `$router.back()` is called, cancelling the original navigation. `persistent` overlays will cancel navigation and animate as if they were clicked outside instead of closing.
`close-on-content-click`	boolean	false
Closes component when you click on its content.
`contained`	boolean	false
Limits the size of the component and scrim to its offset parent. Implies `absolute` and `attach`. (Note: The parent element must have position: relative.).
`content-class`	any	undefined
Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the attach prop is provided) and is not targetable by classes passed directly on the component.
`content-props`	any	undefined
Apply custom properties to the content.
`disabled`	boolean	false
Removes the ability to click or target the component.
`eager` New in v3.2.0	boolean	true
Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
`height`	string \| number	undefined
Sets the height for the component.
`id`	string	undefined
HTML id attribute of the tooltip overlay. If not set, a globally unique id will be used.
`interactive` New in v3.8.0	boolean	false
When true, the tooltip will respond to pointer events, allowing you to copy text from it.
`location`	Anchor	'end'
Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both…
`location-strategy`	'static' \| 'connected' \| LocationStrategyFunction	'connected'
A function used to specifies how the component should position relative to its activator.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	0
Sets the minimum width for the component.
`model-value`	boolean	false
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`no-click-animation`	boolean	false
Disables the bounce effect when clicking outside of the content element when using the persistent prop.
`offset`	string \| number \| number[]	10
Increases distance from the target. When passed as a pair of numbers, the second value shifts anchor along the side and away from the target.
`opacity`	string \| number	undefined
Sets the opacity of the scrim element. Only applies if `scrim` is enabled.
`open-delay`	string \| number	undefined
Delay (in ms) after which tooltip opens (when `open-on-hover` prop is set to true).
`open-on-click`	boolean	false
Designates whether the tooltip should open on activator click.
`open-on-focus`	boolean	undefined
Activate the component when the activator is focused.
`open-on-hover`	boolean	true
Designates whether the tooltip should open on activator hover.
`origin`	Anchor \| 'auto' \| 'overlap'	'auto'
Sets the transition origin on the element. You can find more information on the MDN documentation for transition origin.
`persistent` New in v3.11.3	boolean	false
Clicking outside of the element or pressing esc key will not deactivate it.
`scrim`	string \| boolean	false
Accepts true/false to enable background, and string to define color.
`scroll-strategy`	'close' \| 'none' \| 'block' \| 'reposition' \| ScrollStrategyFunction	'reposition'
Strategy used when the component is activate and user scrolls.
`stick-to-target` New in v3.10.0	boolean	false
Enables the overlay content to go off-screen when scrolling.
`target`	\| Element \| (string & {}) \| 'parent' \| 'cursor' \| ComponentPublicInstance \| [number, number]	undefined
For locationStrategy=“connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.
`text`	string	undefined
Specify content text for the component.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`transition`	string \| boolean \| (TransitionProps & { component: Component })	null
Sets the component transition. Can be one of the built in or custom transition.
`viewport-margin` New in v3.11.0	string \| number	12
Sets custom viewport margin for the overlay content
`width`	string \| number	undefined
Sets the width for the component.
`z-index`	string \| number	2000
The z-index used for the component.

Events

name	type
`update:modelValue`	[boolean]
Event that is emitted when the component’s model changes.

Slots

{
  isActive: boolean
  props: Record<string, any>
  targetRef: TemplateRef
}

{ isActive: Ref<boolean, boolean> }

`activator`
When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation.
`default`
The default Vue slot.

Exposed

HTMLElement

() => void

HTMLElement

boolean

boolean

HTMLElement

HTMLElement

HTMLElement | [number, number]

(e: Event) => void

`activatorEl`
Ref to the current activator element.
`animateClick`
Function invoked when user clicks outside.
`contentEl`
Ref to the current content element.
`globalTop`
Used by activator to determine a components position in the global stack order.
`localTop`
Used by activator to determine a components position in the local stack order.
`rootEl`
Ref to the root v-overlay element.
`scrimEl`
Ref to the current scrim element.
`target`
Ref to the current target element.
`updateLocation`
Function used for locationStrategy positioning.

SASS Variables

name	default
`$tooltip-background-color`	rgb(var(--v-theme-surface-variant))
`$tooltip-border-radius`	settings.$border-radius-root
`$tooltip-font-size`	.875rem
`$tooltip-line-height`	1.6
`$tooltip-overflow-wrap`	break-word
`$tooltip-padding`	5px 16px
`$tooltip-text-color`	rgb(var(--v-theme-on-surface-variant))
`$tooltip-transition-enter-duration`	150ms
`$tooltip-transition-leave-duration`	75ms

#VTooltip API

VTooltip API