Overlays

Tooltip

Provides a short accessible label for an otherwise ambiguous control.

@dawn/ui/components/tooltip

Preview

Rendered from @dawn/ui

Usage

import { Button } from "@dawn/ui/components/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@dawn/ui/components/tooltip";

export const IconAction = () => (
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button aria-label="Add patient" size="icon">+</Button>
      </TooltipTrigger>
      <TooltipContent>Add patient</TooltipContent>
    </Tooltip>
  </TooltipProvider>
);

API

TooltipProvider delayDurationnumber: Sets the opening delay in milliseconds; defaults to 0.
TooltipContent sideOffsetnumber: Sets the distance from the trigger; defaults to 0.
TooltipTrigger asChildboolean: Uses the child control as the accessible trigger.

Exports

TooltipProviderTooltipTooltipTriggerTooltipContent