Tooltip

GradeTested

UsageCopy Anchor Link

import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@cadence-clinical/ui";
import { Printer } from "lucide-react";

<Tooltip>
  <TooltipTrigger
    render={
      <Button variant="outline" iconOnly>
        <Printer />
        Print chart
      </Button>
    }
  />
  <TooltipContent>Print chart</TooltipContent>
</Tooltip>;

Tooltip is built on the Base UI Tooltip and accepts all of its props. It follows the shadcn Tooltip and keeps its part names. Pass the control to TooltipTrigger through render.

A tooltip is never the only place something is saidCopy Anchor Link

A tooltip does not open on a touch screen, and a screen reader does not announce it. So:

• The trigger keeps its own name. An icon-only Button takes its name from its hidden text, not from the tooltip.
• Anything a person needs in order to act belongs on the screen. A dose, an allergy, a warning or an instruction never goes in a tooltip. Use one for a hint that someone could do without, such as the name of an icon. For more than a hint, a Popover opens on a press, so it works on touch.

A row of tooltipsCopy Anchor Link

Wrap a toolbar, or the whole app, in TooltipProvider. The first tooltip waits before it opens. While one is open, the next opens at once and without animation, so a row of icons is quick to explore.

<TooltipProvider>
  <Toolbar />
</TooltipProvider>

What Cadence changesCopy Anchor Link

• The first tooltip waits 50ms. The shadcn tooltip opens with no delay, and Base UI waits 600ms, which reads as a pause on an icon button whose name is only in its tooltip. 50ms feels immediate, and still keeps a pointer crossing a dense toolbar from setting every tooltip off. Set delay on the provider, or on one trigger, to change it.
• It opens from the keyboard at once, with no animation. With a pointer it fades and grows from the side of its trigger in 125ms, and when the user asks for reduced motion it only fades.
• The hint wraps inside its maximum width and is never cut short.
• Its text follows the density.

AccessibilityCopy Anchor Link

• Focusing the trigger opens the tooltip, and Escape closes it without moving focus.
• The colours are the page's text and background, swapped, so they hold the same contrast in every mode.

PropsCopy Anchor Link