Tooltip

overlay

Accessible tooltip overlay with placement variants (top, bottom, left, right), arrow indicator, configurable delay, and focus/hover trigger support. Uses role=tooltip with aria-describedby linking.

Import

typescript
import { Tooltip } from "packages/ui/src";

Props

TooltipProps

PropTypeRequired
contentReactNodeYes
childrenReactElementYes
placementTooltipPlacementNo
delaynumberNo

Examples

Tooltip

Accessible, placement-aware tooltip overlay with arrow indicator and configurable delay.

Placement

Rich Content

Custom Delay

On Any Element

Hover this linkOnline

Metadata

Component Metadata
Familyoverlay
FrameworksNext.js, Astro/EmDash
DescriptionAccessible tooltip overlay with placement variants (top, bottom, left, right), arrow indicator, configurable delay, and focus/hover trigger support. Uses role=tooltip with aria-describedby linking.
PropsTooltipProps (content: ReactNode, children: ReactElement, placement?: TooltipPlacement, delay?: number)
Stateshidden, visible, top, bottom, left, right
A11y
  • role=tooltip on tooltip element
  • aria-describedby on trigger linking to tooltip
  • Keyboard accessible via focus/blur
  • Dismiss on Escape (planned)
Responsive
  • Max-width constraint prevents overflow
  • Touch devices show on focus
Motion
  • Fade-in animation on show
  • Configurable animation duration via token
Token Dependencies
  • components.tooltip.background
  • components.tooltip.textColor
  • components.tooltip.borderRadius
  • components.tooltip.padding
  • components.tooltip.fontSize
  • components.tooltip.maxWidth
  • components.tooltip.shadow
  • components.tooltip.border
  • components.tooltip.arrowSize
  • components.tooltip.arrowColor
  • components.tooltip.zIndex
  • components.tooltip.animationDuration
  • components.tooltip.offsetDistance
Content Slotscontent (ReactNode — string or rich JSX)
CMS Bindings
  • Tooltip text from CMS field
  • Help text from content collection
Test Cases
  • Hidden by default
  • Shows on hover
  • Hides on mouse leave
  • Shows on focus
  • Has role=tooltip
  • Applies placement class
  • Renders rich content
  • Passes className through