Tooltip / Components

The Tooltip component displays additional information when hovering over an element. It's commonly used to provide context or explanations for UI elements.

Plese note: components using popout (Tooltip, Dropdown & Popout) cannot be styled using scoped CSS in Vue SFC. However, you can just define a new <style> tag, style the popout inside and keep rest of your CSS scoped in a separate <style scoped>.

Source

Basic Usage

Different Placements

With Delay

With Icon

With Formatted Content

Props

Name	Default	Type
`placement`	`top`	`top` `right` `bottom` `left` `top-start` `top-end` `right-start` `right-end` `bottom-start` `bottom-end` `left-start` `left-end` Position of the dropdown relative to the trigger
`enter-delay`	`0`	`number` The delay in milliseconds before showing the tooltip
`leave-delay`	`0`	`number` The delay in milliseconds before hiding the tooltip after the cursor leaves
`disabled`	`false`	`boolean` Controls whether the tooltip can render

Slots

Name	Accepts	Description
`default`	`any`	The element that triggers the tooltip
`tooltip`	`any`	The content of the tooltip

Tokens

CSS variable tokens used for global or per-instance manipulation of certain styling.

Token	Default	Description
`--vui-tooltip-padding-block`	`var(--space-xs)`	Vertical padding
`--vui-tooltip-padding-inline`	`var(--space-s)`	Horizontal padding
`--vui-tooltip-max-width`	`512px`	Max tooltip width
`--vui-tooltip-background-color`	`var(--color-bg-raised)`	Background color
`--vui-tooltip-font-size`	`var(--font-size-m)`	Font size
`--vui-tooltip-color`	`var(--color-text)`	Text color