Tooltip

Reveal concise supporting text from keyboard focus or pointer hover.

Usage

Focus hover

Show the same supporting text from pointer hover and keyboard focus.

<!-- Tooltip / Focus Hover -->
<script setup lang="ts">
import { TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow } from '@sectile/vue/tooltip'
</script>

<template>
  <TooltipRoot side="top">
    <TooltipTrigger>Hover or focus</TooltipTrigger>
    <TooltipContent>
      <TooltipArrow />
      Keyboard shortcut: ⌘K
    </TooltipContent>
  </TooltipRoot>
</template>

Initially open

Begin open without occupying layout space around the trigger.

<!-- Tooltip / Initially Open -->
<script setup lang="ts">
import { TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow } from '@sectile/vue/tooltip'
</script>

<template>
  <TooltipRoot side="top">
    <TooltipTrigger>Hover or focus</TooltipTrigger>
    <TooltipContent>
      <TooltipArrow />
      Keyboard shortcut: ⌘K
    </TooltipContent>
  </TooltipRoot>
</template>

Controlled

Let the parent own the current value and apply accepted changes back to the component.

<!-- Tooltip / Controlled -->
<script setup lang="ts">
import { TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow } from '@sectile/vue/tooltip'
</script>

<template>
  <TooltipRoot side="top">
    <TooltipTrigger>Hover or focus</TooltipTrigger>
    <TooltipContent>
      <TooltipArrow />
      Keyboard shortcut: ⌘K
    </TooltipContent>
  </TooltipRoot>
</template>

Floating positioning

This component uses the shared positioning engine. Use the live positioning example to change side, align, offsets, collision boundaries, strategy, and tracking while inspecting the resolved placement.

API

Vue package: @sectile/vue/tooltip

Components

TooltipRoot
TooltipTrigger
TooltipPortal
TooltipContent
TooltipArrow

Props

`TooltipRootProps`

align: TypePositionAlignDefault'center'
Alignment of positioned content relative to its anchor.
arrowPadding: TypenumberDefault8
Minimum space kept between an arrow and the edge of positioned content.
avoidCollisions: TypebooleanDefaulttrue
Whether positioned content may flip or shift to remain visible.
collisionBoundary: TypePositionBoundaryDefaultundefined
Boundary used to keep positioned content visible.
collisionPadding: TypePositionPaddingDefault8
Space kept between positioned content and its collision boundary.
defaultOpen: TypebooleanDefaultfalse
Initial uncontrolled open state.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
hideWhenDetached: TypebooleanDefaultfalse
Whether positioned content hides when its anchor leaves the layout.
open: TypebooleanDefaultundefined
Whether the associated popup or disclosure is open.
position: TypebooleanDefaultundefined
Whether the popup is positioned relative to its trigger.
side: TypePositionSideDefault'bottom'
Preferred side of the anchor for positioned content.
sideOffset: TypenumberDefault8
Distance between positioned content and its anchor.
strategy: TypePositionStrategyDefault'absolute'
CSS positioning strategy used for anchored content.
tracking: TypePositionTrackingDefaultundefined
Update strategy used while anchored content is open.
unmountOnExit: TypebooleanDefaultfalse
Whether presence-managed content is removed from the DOM after its exit motion completes.

`TooltipPartProps`

as: TypePrimitiveAsDefaultVaries by part
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

`TooltipPortalProps`

defer: TypebooleanDefaultfalse
Whether Teleport target resolution waits until the end of the current mount or update tick.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
to: Typestring | HTMLElementDefault'body'
Teleport target for portalled content.

Slots

`TooltipRootSlotProps`

disabled: Typeboolean
Whether interaction is unavailable.
open: Typeboolean
Whether the associated popup or disclosure is open.

Other types

`TooltipOpenChangeHandler`

type TooltipOpenChangeHandler = PopupFactoryOptions['onOpenChange']

Parts

Shared scope: [data-scope="tooltip"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`trigger`	`[data-part="trigger"]`	Opens, closes, or activates the associated content.	—
`content`	`[data-part="content"]`	Contains the component content shown for the active state.	—
`arrow`	`[data-part="arrow"]`	Visually connects floating content to its anchor.	—

Keyboard interaction

Key	Behavior
`Tab`	Reveal the tooltip when its trigger receives keyboard focus.
`Escape`	Dismiss the visible tooltip.

Accessibility

The tooltip is associated with its trigger as a description and never receives focus itself.

See the corresponding WAI-ARIA pattern for the host accessibility contract.

Tooltip ​

Usage ​

Focus hover ​

Initially open ​

Controlled ​

Floating positioning ​

API ​

Props ​

TooltipRootProps ​

TooltipPartProps ​

TooltipPortalProps ​

Slots ​

TooltipRootSlotProps ​

Other types ​

TooltipOpenChangeHandler ​

Parts ​

Keyboard interaction ​

Accessibility ​