Tooltip

Tooltip shows a small hint when the user hovers or focuses a control. Use it to clarify an icon button or add a detail, never for information the user needs to complete a task, since it's hidden by default and unavailable on touch.

Usage

import {
  TooltipProvider, Tooltip, TooltipTrigger, TooltipContent,
} from "@sina-design-system/core";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="ghost" aria-label="Info"><Icon …/></Button>
    </TooltipTrigger>
    <TooltipContent>Groups digits on blur.</TooltipContent>
  </Tooltip>
</TooltipProvider>

Examples

Accessibility

Opens on hover and keyboard focus, dismisses on Esc, and is announced via aria-describedby. The trigger still needs its own accessible label.