overlay · Normal DOM only

Tooltip

Short, hover-revealed label or hint anchored to a trigger. Requires <TooltipProvider> at app root.

Use Tooltip to surface a label on an icon-only button, expose the full text behind a truncated value, or hint at a keyboard shortcut. Tooltips are not interactive — for clickable content use Popover.

Inside a Twenty front-component, prefer the bridge import

This Tooltip is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { AppTooltip } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Twenty's name for what we call Tooltip.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Tooltip, TooltipProvider } from '@8maverik8/twenty-design';

Examples

Plain / positioned / rich

tsx
<Tooltip content="Edit"><Button …>Hover me</Button></Tooltip>

Guidelines

✓

Mount one TooltipProvider near the root of the app.It controls global open / skip delays — multiple providers fight over timing.

Hide critical information in a Tooltip.They're inaccessible on touch devices and during keyboard nav without focus support.