Skip to content

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Tooltips are essential for clarifying icons or truncated text. Our implementation ensures they are accessible via keyboard focus and screen readers.

Accessibility Features

  • Trigger: Can be triggered by both hover and focus.
  • Dismissible: Can be dismissed with Esc key.

Usage Example

import { Tooltip, TooltipTrigger, TooltipContent } from '@holmdigital/components'; <Tooltip> <TooltipTrigger>Hover me</TooltipTrigger> <TooltipContent>Detailed information here</TooltipContent> </Tooltip>