Components / Tooltip

Tooltip

A short label on hover or focus that names a control or explains a value: what an icon-only button does, what a metric counts.

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@layers/ui/tooltip'

Rendered stock

House rules

• A TooltipProvider must sit above every tooltip. In the product the app shell provides it; pages and features never mount their own.
• Icon-only buttons carry both an aria-label and a tooltip naming the action.
• Tooltips label things; they never hold actions or interactive content.
• Triggers attach via render={<Button />}; there is no asChild in the Base UI wrappers.