7onicDESIGN SYSTEM

Tooltip

An overlay component that displays supplemental information when hovering or focusing an element — ideal for button labels, icon hints, and keyboard shortcuts.

2
Variants
2
Sizes
4
Sides
Radix
Base

Playground

Preview
defaultTop
Variant
Size
Side
Options
<Tooltip>
  <Tooltip.Trigger asChild>
    <Button variant="outline">Hover me</Button>
  </Tooltip.Trigger>
  <Tooltip.Content>
    Tooltip text
  </Tooltip.Content>
</Tooltip>

Variants

Default
Dark background with shadow — for general supplemental hints with a floating feel.
Icon labels, hints
Inverted
Glassmorphism background — a refined style with background blur.
Rich UI, light backgrounds

Sizes

sm
Font12px
Padding4px 10px
default
Font13px
Padding6px 12px

Features

Side Placement

Renders in 4 directions — top, right, bottom, left. Defaults to top.

<Tooltip.Content side="top">Top</Tooltip.Content>
<Tooltip.Content side="right">Right</Tooltip.Content>
<Tooltip.Content side="bottom">Bottom</Tooltip.Content>
<Tooltip.Content side="left">Left</Tooltip.Content>

Arrow

showArrow controls the pointer arrow toward the trigger. Shown by default.

{/* With arrow (default) */}
<Tooltip.Content>With arrow</Tooltip.Content>

{/* Without arrow */}
<Tooltip.Content showArrow={false}>No arrow</Tooltip.Content>

Alignment

align adjusts alignment relative to the trigger.

<Tooltip.Content align="start">Start</Tooltip.Content>
<Tooltip.Content align="center">Center</Tooltip.Content>
<Tooltip.Content align="end">End</Tooltip.Content>

Provider

Tooltip.Provider manages global delay settings. With skipDelayDuration, subsequent tooltips appear instantly on continuous hover.

<Tooltip.Provider delayDuration={400} skipDelayDuration={200}>
  {/* All tooltips inside share these delay settings */}
  <Tooltip>
    <Tooltip.Trigger asChild>
      <Button>First</Button>
    </Tooltip.Trigger>
    <Tooltip.Content>First tooltip</Tooltip.Content>
  </Tooltip>
</Tooltip.Provider>

API

Component Structure

Tooltip— Radix Tooltip
.Trigger.ContentProps.Arrow.Portal.ProviderProps

Props

Tooltip (Root)

openundefined
boolean

Tooltip visibility state (controlled mode)

defaultOpenfalse
boolean

Initial visibility state (uncontrolled mode)

onOpenChangeundefined
(open: boolean) => void

Callback when visibility state changes

delayDuration200
number

Delay from hover to show (ms)

disableHoverableContentfalse
boolean

Don't maintain visibility on content hover

Tooltip.Content

variant"default"
"default" | "inverted"

Visual style — default: dark background + shadow; inverted: glassmorphism

size"default"
"sm" | "default"

Text size

side"top"
"top" | "right" | "bottom" | "left"

Placement direction

sideOffset6
number

Distance from trigger (px)

align"center"
"start" | "center" | "end"

Alignment relative to trigger

showArrowtrue
boolean

Show the pointer arrow

Tooltip.Provider

delayDuration700
number

Global hover delay (ms)

skipDelayDuration300
number

Delay skip duration for continuous hover (ms)

disableHoverableContentfalse
boolean

Globally disable content hover persistence

Anatomy

2
Tooltip text
3
sideOffset: 6px
1
Button
1
Trigger
Hover target element
2
Content
Tooltip body
3
Arrow
Direction indicator arrow

Best Practices

✓

Recommended

  • ✓Use Tooltip for supplemental labels on icon buttons and actions
  • ✓Keep text short and concise — 1–2 lines max
  • ✓Use Tooltip to display keyboard shortcuts
  • ✓Use Tooltip to show truncated text in full
✕

Don't

  • ✕Don't put critical information only in a Tooltip — always write it in visible text
  • ✕Don't place interactive content (links, buttons) inside a Tooltip — use Popover instead
  • ✕Don't put long paragraphs or rich content in a Tooltip
  • ✕Don't use Tooltip for information touch-only users need

Tooltip vs Popover

Similar floating UI, but different purpose and interaction.

Trigger

Tooltip: Hover / Focus

Popover: Click

Content

Tooltip: Text only (short supplement)

Popover: Rich (forms, buttons, links)

Interaction

Tooltip: None (read only)

Popover: Yes (interactive)

Default direction

Tooltip: top (doesn't interrupt reading flow)

Popover: bottom (natural top-to-bottom flow)

Dismiss

Tooltip: Auto on hover end

Popover: Outside click / Esc / Close button

ARIA

Tooltip: role="tooltip"

Popover: aria-expanded + aria-controls

Use Tooltip for short supplemental text shown on hover. Use Popover when interactive content like links or buttons is needed.

Accessibility

Keyboard

TabFocus trigger to show (no delay)
EscDismiss the tooltip

ARIA / WCAG

  • role="tooltip" Assigned by Radix automatically
  • aria-describedby Linked automatically
  • WCAG 1.4.13 — content stays on hover
  • Auto collision avoidance (prevents overflow)