Tooltip

A short hint on hover or keyboard focus. Use it for extra words about a control that already has a name; for anything a touch user needs, use InfoTip.

Tooltip

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Tooltip

Dark theme, Tooltip

High contrast theme, Tooltip

UsageLink to the section Usage

tsx

import { Tooltip } from '@skribly/ui/overlays'

tsx

<Tooltip content="Saves a copy you can return to later">
  <Button>Save version</Button>
</Tooltip>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Shows at once on keyboard focus and after a short delay on hover, stays while the pointer is over it, and Escape hides it.
Its text describes the trigger through aria-describedby.
IconButton has its own tooltip, so do not wrap it.

This demo runs through axe in all three themes on every test run. See what the tests check.