Overlays

Tooltip

Short hint on hover or focus.

Import

tsx

import { Tooltip } from "@cronus-ui/ui";

bash

npx cronus-ui add tooltip

Examples

On a button

A small label revealed on hover or focus, mounted inside a shared provider.

tsx

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline" size="icon" aria-label="Add to library">
        <Plus aria-hidden="true" />
      </Button>
    </TooltipTrigger>
    <TooltipContent>Add to library</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">
        <HelpCircle aria-hidden="true" />
        Need help?
      </Button>
    </TooltipTrigger>
    <TooltipContent>We usually reply within minutes.</TooltipContent>
  </Tooltip>
</TooltipProvider>