tooltip

Tooltip

A short label that appears beside an element on hover or keyboard focus, such as naming an icon button; announced as the trigger's description.

States: Default

Parts

Part	File	Does
Tooltip	Tooltip.vue	Groups a trigger with the short hint shown when the user hovers or focuses it.
TooltipContent	TooltipContent.vue	Holds the short hint the tooltip shows.
TooltipProvider	TooltipProvider.vue	Shares timing settings between all tooltips inside it.
TooltipTrigger	TooltipTrigger.vue	Marks the element that shows the tooltip on hover or focus.

Anatomy

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger />
    <TooltipContent />
  </Tooltip>
</TooltipProvider>

Styling

Part	Recipe
TooltipContent	tooltip-content
TooltipContent	tooltip-arrow

Install

Writes 5 files into components/ui/tooltip/. For agents, npx @frontic/ui docs tooltip prints this reference as markdown; the MCP server serves the same.

npm packages: @vueuse/core; reka-ui

API reference

Tooltip Tooltip.vue

Groups a trigger with the short hint shown when the user hovers or focuses it.

Prop	Type	Default
defaultOpen	boolean	false

open	boolean	—

delayDuration	number	700

disableHoverableContent	boolean	—

disableClosingTrigger	boolean	false

disabled	boolean	false

ignoreNonKeyboardFocus	boolean	false

Event	Payload
update:open	value: boolean

Slot	Slot props
default	{ open: boolean; }

TooltipContent TooltipContent.vue

TooltipProvider TooltipProvider.vue

TooltipTrigger TooltipTrigger.vue

Example