Tooltip

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/tooltip

UsageCopy Anchor Link

import { Tooltip, TooltipPopup, TooltipTrigger } from "@/components/ui/tooltip";

<Tooltip>
  <TooltipTrigger render={<Button aria-label="Add" size="icon" />}>
    <PlusIcon />
  </TooltipTrigger>
  <TooltipPopup>Add</TooltipPopup>
</Tooltip>;

AccessibilityCopy Anchor Link

Tooltips show on hover and keyboard focus, but screen readers don't read them and touch screens can't open them. Treat them as a visual hint only:

• Give the trigger its own name. For icon buttons, pass an aria-label that matches the tooltip text.
• Don't put essential information in a tooltip. Use a Popover with tooltipStyle instead.

SidesCopy Anchor Link

Grouped tooltipsCopy Anchor Link

Wrap related tooltips in TooltipProvider. Once one is open, moving to the next shows it right away, without waiting for the delay.

API referenceCopy Anchor Link

Built on Base UI Tooltip. Every part accepts the props of its Base UI counterpart. Set delay and closeDelay on TooltipTrigger (or TooltipProvider) to change the timing. TooltipPopup is also exported as TooltipContent.

TooltipPopupCopy Anchor Link