Info Tooltip

Description

InfoTooltip is a compound component built on Radix Tooltip, composed from a root plus InfoTooltipTrigger, InfoTooltipContent, and an optional shared InfoTooltipProvider. It renders a small info-circle icon as the trigger and a styled hint bubble as the content. Set variant or size on the root and it switches to a simplified API: the children become the bubble content and the icon plus content are wired up for you. Leave both off and it is a bare Radix root you compose yourself.

InfoTooltipContent is a free slot. Its children usually are a single line of text, but they don't have to be: size sets the bubble's gap and type scale, so anything you compose inside, a titled definition, an icon paired with a hint, or a small key/value breakdown, stacks in a vertical column without extra sizing. Keep whatever you put there passive and readable, tooltips dismiss on blur and are not reliably announced, so never move interactive controls or must-read content into the bubble.

Reach for it next to a field Label to answer "what is this?" without spending layout on a description. The canonical placement is inside LabelInfoSlot, so the icon trails the label text and the hint opens on hover or keyboard focus. It opens downward by default (side="bottom"), which differs from the top-default of most tooltips.

Don't use it for hover hints on arbitrary controls like buttons or truncated text; that is Tooltip. Don't use it for click-to-open rich or interactive content (there is no popover component); put that content inline instead. For a persistent, always-visible note under a field, use Field helper text or Inline Alert.

Installation

pnpm dlx @create-ui/cli add info-tooltip

Anatomy

The simplified root renders the whole pattern from one element:

<InfoTooltip variant="inverse" size="sm">
  Helper text
</InfoTooltip>

Drop variant and size to compose the parts yourself. Wrap a shared InfoTooltipProvider once near the root of the app if you want a common hover delay.

<InfoTooltip>
  <InfoTooltipTrigger />
  <InfoTooltipContent>Helper text</InfoTooltipContent>
</InfoTooltip>

Usage

import { InfoTooltip } from "@/components/ui/info-tooltip"

<InfoTooltip variant="inverse" size="sm">
  Helper text
</InfoTooltip>

Examples

Every example is a Pro preview (marked with a Pro badge). Each sets variant on the root, which activates the simplified API, and passes the hint as children. size stays at its sm default except in the sizes example.

Variants

variant tones both the icon and the bubble. primary is the default; neutral and inverse stay quiet for metadata, while danger and info carry status color. inverse is the light-on-dark bubble used in the field-label pattern.

Sizes

size scales the icon, bubble padding, type, and radius together. sm is the default and fits a label row; md and lg suit denser copy or larger surfaces.

Placement

side picks the edge the bubble opens from (bottom by default) and align shifts it along that edge (start, center, end). Radix flips the side automatically when there is no room.

Arrow

The bubble points at its trigger with an arrow by default. Set showArrow={false} for a clean rectangle; the gap auto-adjusts so spacing stays even.

Rich content

InfoTooltipContent is a slot, so the children don't have to be a single string. Compose them and the bubble stacks whatever you pass in a vertical column: a bold term over its definition, an icon paired with a hint, or a small key/value breakdown. The gap and type scale follow size, so nothing needs per-part sizing. Keep it passive, the inverse variant reads best for multi-line copy.

In a field label

Drop the tooltip into LabelInfoSlot so the icon trails the label and lines up with the field. This is the pattern the component is tuned for, usually with variant="inverse".

In a form

A short billing form where each field pairs a Label with an InfoTooltip that explains what to enter, so the guidance sits inline without crowding the layout.

Accessibility

InfoTooltip is built on Radix Tooltip. The trigger is focusable and the hint opens on hover or keyboard focus.

ARIA notes:

• Radix wires the open content to the trigger with aria-describedby and gives the bubble role="tooltip". The trigger renders as a button with data-state reflecting open or closed.
• The default trigger is an icon with no text. Pass an aria-label to InfoTooltipTrigger (or give it readable children) so assistive tech can name what the hint describes.
• Tooltips are dismissed on blur and are not reliably announced by every screen reader. Keep the hint supplementary; never hide content the user must read to complete the task.

Styling

Tailwind override: pass className to the root (simplified mode) or to InfoTooltipContent (composed mode); it merges onto the bubble via cn().

<InfoTooltip variant="inverse" size="sm" className="max-w-[200px]">
  Helper text
</InfoTooltip>

Data slots and attributes: the component sets these for CSS targeting:

• data-slot="info-tooltip-provider" on the provider.
• data-slot="info-tooltip" on the root.
• data-slot="info-tooltip-trigger" on the trigger, with data-state ("open", "closed").
• data-slot="info-tooltip-trigger-icon" on the built-in icon.
• data-slot="info-tooltip-content" on the bubble, with data-side and data-align from Radix.
• data-slot="info-tooltip-arrow" on the arrow.

Target a specific state in CSS:

[data-slot="info-tooltip-content"][data-side="top"] {
  /* ... */
}

Related Components

• Tooltip: use this for a hover hint on any control (button, link, truncated text), not just a label icon.
• Label: the host for the icon, via its LabelInfoSlot part.
• Inline Alert: use this for a persistent inline note under a field rather than an on-demand hint.
• Field: use its helper and error text for validation messaging tied to an input.

API Reference

InfoTooltip

The root. Extends React.ComponentProps of Radix Tooltip.Root (open, defaultOpen, onOpenChange, etc.). Passing variant or size activates the simplified API, where children is the hint text; with neither prop set it is a bare root you compose with InfoTooltipTrigger and InfoTooltipContent.

Props

Variants

InfoTooltipTrigger

The clickable target that opens the hint. Extends React.ComponentProps of Radix Tooltip.Trigger. With no children it renders the built-in info icon; pass children (with asChild) to use your own element, in which case variant and size no longer apply. It always carries the group class so custom children can react to group-hover: and group-data-[state=open]:.

Props

InfoTooltipContent

The hint bubble. Extends Radix Tooltip.Content (minus the layout props it manages itself). Set variant and size here in composed mode; they do not cascade from the trigger.

Props

InfoTooltipProvider

Optional shared provider for setting a common hover delay across several tooltips. Extends Radix Tooltip.Provider. Each simplified InfoTooltip nests its own provider, so an outer delay is shadowed there.

Props