Tooltip

npx shadcn@latest add https://4af.selfsimilar.dev/r/tooltip.json

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

<TooltipProvider>
  <Tooltip content="Save changes">
    <button>Save</button>
  </Tooltip>
</TooltipProvider>

API⠋

Main exports: TooltipProvider, Tooltip

A Base UI hover and focus tooltip with delay, collision-aware placement, and a CSS scale-and-blur entrance. Use delay to control when it opens; closeOnClick={false} keeps it open when the trigger is pressed, which is useful for live-value controls such as sliders. Pass open for controlled visibility, and disableHoverablePopup when the tooltip should close as soon as the pointer leaves the trigger instead of remaining open while the popup is hovered. Positioning options can be forwarded through positionerProps.

Within one TooltipProvider, moving between neighbouring triggers opens the next tooltip instantly, without the entrance transition.