Overlays & menusBrick 0.1.2

Tooltip

Tooltip supplies a short supplementary label or description for a trigger.

Live example

Built from the published package

Interactive

Choose with confidence

Know when Tooltip is the right part

Use it when

Use it to clarify an icon or unfamiliar control on hover and keyboard focus.

Choose another path when

Do not place required, interactive, or lengthy content in a Tooltip. Use HoverCard for previews and Popover for click-open interactive content.

Installation and imports

tsx

import { Tooltip } from "@flowstack-ui/brick/tooltip";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/tooltip.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Quick start

tsx

<Tooltip.Root>
  <Tooltip.Trigger aria-label="Delete">×</Tooltip.Trigger>
  <Tooltip.Portal><Tooltip.Content>Delete</Tooltip.Content></Tooltip.Portal>
</Tooltip.Root>

Visual recipes and states

Shape changes Content geometry. Plain text remains compact; Title and Description create rich structured content. Atom owns open/closed state, delays, presence, placement, collision handling, and Arrow coordinates.

Examples

tsx

<Tooltip.Content shape="pill">
  <Tooltip.Title>Keyboard shortcut</Tooltip.Title>
  <Tooltip.Description>Command K</Tooltip.Description>
</Tooltip.Content>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are the Tooltip namespace; named TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipTitle, TooltipDescription, and TooltipArrow parts; and their corresponding TooltipProviderProps, TooltipRootProps, TooltipTriggerProps, TooltipPortalProps, TooltipContentProps, TooltipTextProps, TooltipTitleProps, TooltipDescriptionProps, TooltipArrowProps, and TooltipShape types.

Content prop	Values	Default
`shape`	`rounded`, `pill`	`rounded`
`sideOffset`	`number`	`8`

Title/Description prop	Values	Default
`asChild`	`boolean`	`false`

Root and Provider inherit Atom state/delay props. Content adds the shape recipe and excludes Atom aria-label spellings. Title and Description accept native attributes plus asChild or render.

Shared responsibility

Accessibility

Atom owns tooltip relationship, hover/focus opening, Escape dismissal, and noninteractive semantics. The trigger still needs its own accessible name when the tooltip text is only supplementary.

Responsive behavior

Text wraps within its maximum inline size and Atom flips/shifts Content around viewport collisions. Logical placement supports RTL.

Stable visual contract

Styling and tokens

Customization

Use placement/delay and shape props first, then public tokens. Use part className, style, asChild, or render for scoped structure.

Tokens and CSS hooks

Stable classes and overridable data-slot values cover trigger, content, title, description, and arrow; Content exposes data-shape plus Atom state/placement data. Public tokens are --brick-tooltip-background, --brick-tooltip-foreground, --brick-tooltip-border-color, --brick-tooltip-radius, --brick-tooltip-shadow, --brick-tooltip-padding-block, --brick-tooltip-padding-inline, --brick-tooltip-max-inline-size, --brick-tooltip-rich-gap, and --brick-tooltip-rich-max-inline-size.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground