DocsDocsSDKs

Tooltip

React SDK guidance for Tooltip.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

When to use it

Use Tooltip when a UI element needs a short explanatory label that should not take up permanent space. It works well for icon-only buttons in toolbars, truncated text that needs a full-length preview, and any affordance where the label would be redundant for most visitors but helpful on hover or keyboard focus.

If the hint needs interactive content (links, buttons, form fields), use Popover instead. Tooltips are display-only and dismiss on mouse leave.

Slot strategy

Tooltip has three parts plus a shared provider:

  • TooltipProvider sets the delay and skip behavior for all tooltips in its subtree. Place it once near the top of a page or section rather than wrapping each tooltip individually.
  • Tooltip is the root for a single trigger-content pair.
  • TooltipTrigger is the element that activates the hint. Use asChild to avoid adding a wrapper span.
  • TooltipContent is the floating label. It includes a built-in arrow and positions itself automatically.

Provider placement matters

When several tooltips sit next to each other (like an action bar), sharing one TooltipProvider enables the skip delay: after the first tooltip opens, moving to the next trigger shows its tooltip immediately instead of waiting for the full delay again.

Behavior and theming guidance

The tooltip renders with the primary background color and a small arrow pointing at the trigger. The sideOffset default is 4px, which keeps the tooltip close without overlapping.

Use delayDuration on the provider to control the hover delay. The SDK default is 0ms (instant), but a small delay like 200ms feels more natural for action bars where accidental hovers are common.

Tooltips animate in with a combined fade and zoom transition. The slide direction matches the side prop: a bottom-side tooltip slides in from the top, and so on. Radix handles collision avoidance, so the tooltip repositions automatically near viewport edges.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/ui-resolver.
  • Playground route: /sandbox?component=Tooltip.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

Tooltip

# Tooltip > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/ui-resolver`. - Live playground: [/components/base-ui/tooltip](https://sdk.enad.io/components/base-ui/tooltip). ## When to use it Use `Tooltip` when a UI element needs a short explanatory label that should not take up permanent space. It works well for icon-only buttons in toolbars, truncated text that needs a full-length preview, and any affordance where the label would be redundant for most visitors but helpful on hover or keyboard focus. If the hint needs interactive content (links, buttons, form fields), use `Popover` instead. Tooltips are display-only and dismiss on mouse leave. ## Slot strategy Tooltip has three parts plus a shared provider: - `TooltipProvider` sets the delay and skip behavior for all tooltips in its subtree. Place it once near the top of a page or section rather than wrapping each tooltip individually. - `Tooltip` is the root for a single trigger-content pair. - `TooltipTrigger` is the element that activates the hint. Use `asChild` to avoid adding a wrapper span. - `TooltipContent` is the floating label. It includes a built-in arrow and positions itself automatically. > **Provider placement matters** > > When several tooltips sit next to each other (like an action bar), sharing one `TooltipProvider` > enables the skip delay: after the first tooltip opens, moving to the next trigger shows its > tooltip immediately instead of waiting for the full delay again. ## Behavior and theming guidance The tooltip renders with the primary background color and a small arrow pointing at the trigger. The `sideOffset` default is 4px, which keeps the tooltip close without overlapping. Use `delayDuration` on the provider to control the hover delay. The SDK default is 0ms (instant), but a small delay like 200ms feels more natural for action bars where accidental hovers are common. Tooltips animate in with a combined fade and zoom transition. The slide direction matches the `side` prop: a bottom-side tooltip slides in from the top, and so on. Radix handles collision avoidance, so the tooltip repositions automatically near viewport edges. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/ui-resolver`. - Playground route: /sandbox?component=Tooltip. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes