tooltip

28 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Tooltip no longer opens if interacting with trigger before open timer expires

Tooltip no longer opens if the user interacts with the trigger before the open timer expires.

Tooltip.Provider required for all tooltips

Tooltip.Provider is now required; it must wrap your app to avoid regressions.

Tooltip.Content remains open on hover by default

By default, Tooltip.Content will remain open when hovering to comply with WCAG 2.1 Content on Hover. The disableHoverableContent prop can be supplied to Tooltip.Provider to restore previous behavior.

Tooltip.Content side prop defaults to top

Tooltip.Content's side prop now defaults to 'top'.

Tooltip.Content collisionPadding prop replaces collisionTolerance

Tooltip.Content's collisionTolerance prop was renamed to collisionPadding and now accepts either a number or a padding object.

Tooltip.Content Arrow offset prop removed

The offset prop was removed from Tooltip.Arrow.

Tooltip.Content new positioning props

Tooltip.Content has new props: collisionBoundary, arrowPadding, sticky, and hideWhenDetached.

Tooltip.Portal added for portalling behavior

Tooltip now has a Portal part. To avoid regressions, this part should be used if portalling behavior is desired. Note that z-index is no longer managed, providing full control of layering.

Tooltip component basic usage with IconButton

A Tooltip component can be used to display contextual information via pointer or focus. Basic example: wrap an IconButton with a Tooltip element, passing the tooltip text to the content prop.

Tooltip theme component parts composition

The Tooltip theme component merges props from the Radix Tooltip primitive Root, Portal, and Content parts. It also supports common margin props as documented in the layout overview.

Tooltip definition and overview

A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Tooltip highlights and features

Tooltip provides: a Provider to control display delay globally; opens when the trigger is focused or hovered; closes when the trigger is activated or when pressing escape; supports custom timings.

Tooltip anatomy

A tooltip is composed of Tooltip.Provider (wraps the app), Tooltip.Root (contains all parts), Tooltip.Trigger (the button that toggles the tooltip), Tooltip.Portal (portals the content into the body), Tooltip.Content (the popup component), and Tooltip.Arrow (optional arrow element).

Tooltip.Provider props

Tooltip.Provider has three props: delayDuration (number, default 700) - the duration from when the mouse enters a tooltip trigger until the tooltip opens; skipDelayDuration (number, default 300) - how much time a user has to enter another trigger without incurring a delay again; disableHoverableContent (boolean) - prevents Tooltip.Content from remaining open when hovering, disabling this has accessibility consequences.

Tooltip.Root props

Tooltip.Root has five props: defaultOpen (boolean) - the open state when initially rendered, use when not controlling open state; open (boolean) - the controlled open state, must be used with onOpenChange; onOpenChange ((open: boolean) => void) - event handler called when open state changes; delayDuration (number, default 700) - override the Provider delay for a specific tooltip; disableHoverableContent (boolean, default false) - prevents content from remaining open when hovering, inherits from Tooltip.Provider.

Tooltip.Trigger props

Tooltip.Trigger has one prop: asChild (boolean, default false) - changes the default rendered element to the one passed as a child, merging their props and behavior.

Tooltip.Trigger data attributes

Tooltip.Trigger exposes data-state attribute with values: closed, delayed-open, instant-open.

Tooltip.Portal props

Tooltip.Portal has two props: forceMount (boolean) - used to force mounting when more control is needed, useful for animation libraries, inherits to Tooltip.Content; container (HTMLElement, default document.body) - specify a container element to portal the content into.

Tooltip.Content props

Tooltip.Content has these props: asChild (boolean, default false) - changes the default rendered element; aria-label (string) - provides a descriptive label for screenreaders when inner content is not descriptive enough; onEscapeKeyDown ((event: KeyboardEvent) => void) - event handler for escape key, preventable; onPointerDownOutside ((event: PointerDownOutsideEvent) => void) - event handler for pointer events outside bounds, preventable; forceMount (boolean) - force mounting for animation control, inherits from Tooltip.Portal; side ("top" | "right" | "bottom" | "left", default "top") - preferred side to render against, reversed on collisions if avoidCollisions enabled; sideOffset (number, default 0) - distance in pixels from trigger; align ("start" | "center" | "end", default "center") - preferred alignment against trigger; alignOffset (number, default 0) - offset in pixels from start or end alignment; avoidCollisions (boolean, default true) - overrides side and align to prevent collisions; collisionBoundary (Element | null | Array<Element | null>, default []) - element(s) used as collision boundary, defaults to viewport; collisionPadding (number | Partial<Record<Side, number>>, default 0) - distance in pixels from boundary edges for collision detection, accepts same value for all sides or partial padding object; arrowPadding (number, default 0) - padding between arrow and content edges, prevents overflow at border-radius corners; sticky ("partial" | "always", default "partial") - partial keeps content in boundary while trigger is partially in boundary, always keeps content in boundary regardless; hideWhenDetached (boolean, default false) - hide content when trigger becomes fully occluded.

Tooltip.Content data attributes

Tooltip.Content exposes three data attributes: data-state with values closed, delayed-open, instant-open; data-side with values left, right, bottom, top; data-align with values start, end, center.

Tooltip.Content CSS variables

Tooltip.Content exposes five CSS variables: --radix-tooltip-content-transform-origin (the transform-origin computed from content and arrow positions/offsets); --radix-tooltip-content-available-width (the remaining width between trigger and boundary edge); --radix-tooltip-content-available-height (the remaining height between trigger and boundary edge); --radix-tooltip-trigger-width (the width of the trigger); --radix-tooltip-trigger-height (the height of the trigger).

Tooltip.Arrow props

Tooltip.Arrow has three props: asChild (boolean, default false) - changes the default rendered element; width (number, default 10) - the width of the arrow in pixels; height (number, default 5) - the height of the arrow in pixels. Must be rendered inside Tooltip.Content.

Example: Configure tooltip delay globally

Use Tooltip.Provider with delayDuration and skipDelayDuration props to control timing globally: ```jsx import { Tooltip } from "radix-ui"; export default () => ( <Tooltip.Provider delayDuration={800} skipDelayDuration={500}> <Tooltip.Root> <Tooltip.Trigger>…</Tooltip.Trigger> <Tooltip.Content>…</Tooltip.Content> </Tooltip.Root> <Tooltip.Root> <Tooltip.Trigger>…</Tooltip.Trigger> <Tooltip.Content>…</Tooltip.Content> </Tooltip.Root> </Tooltip.Provider> ); ```

Example: Show tooltip instantly

Use the delayDuration prop on Tooltip.Root set to 0 to open the tooltip instantly: ```jsx import { Tooltip } from "radix-ui"; export default () => ( <Tooltip.Root delayDuration={0}> <Tooltip.Trigger>…</Tooltip.Trigger> <Tooltip.Content>…</Tooltip.Content> </Tooltip.Root> ); ```

Example: Constrain tooltip content size

Use CSS custom properties --radix-tooltip-trigger-width and --radix-tooltip-content-available-height to constrain content dimensions: JSX: ```jsx import { Tooltip } from "radix-ui"; import "./styles.css"; export default () => ( <Tooltip.Root> <Tooltip.Trigger>…</Tooltip.Trigger> <Tooltip.Portal> <Tooltip.Content className="TooltipContent" sideOffset={5}> … </Tooltip.Content> </Tooltip.Portal> </Tooltip.Root> ); ``` CSS: ```css .TooltipContent { width: var(--radix-tooltip-trigger-width); max-height: var(--radix-tooltip-content-available-height); } ```

Example: Origin-aware tooltip animations

Use the --radix-tooltip-content-transform-origin CSS variable to animate content from its computed origin: JSX: ```jsx import { Tooltip } from "radix-ui"; import "./styles.css"; export default () => ( <Tooltip.Root> <Tooltip.Trigger>…</Tooltip.Trigger> <Tooltip.Content className="TooltipContent">…</Tooltip.Content> </Tooltip.Root> ); ``` CSS: ```css .TooltipContent { transform-origin: var(--radix-tooltip-content-transform-origin); animation: scaleIn 0.5s ease-out; } @keyframes scaleIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } ```

Example: Collision-aware tooltip animations

Use data-side and data-align attributes that change at runtime to create collision-aware animations: JSX: ```jsx import { Tooltip } from "radix-ui"; import "./styles.css"; export default () => ( <Tooltip.Root> <Tooltip.Trigger>…</Tooltip.Trigger> <Tooltip.Content className="TooltipContent">…</Tooltip.Content> </Tooltip.Root> ); ``` CSS: ```css .TooltipContent { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .TooltipContent[data-side="top"] { animation-name: slideUp; } .TooltipContent[data-side="bottom"] { animation-name: slideDown; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } ```

Example: Custom tooltip API with content prop

Abstract tooltip parts and introduce a content prop using asChild on the trigger: Usage: ```jsx import { Tooltip } from "./your-tooltip"; export default () => ( <Tooltip content="Tooltip content"> <button>Tooltip trigger</button> </Tooltip> ); ``` Implementation: ```jsx import * as React from "react"; import { Tooltip as TooltipPrimitive } from "radix-ui"; export function Tooltip({ children, content, open, defaultOpen, onOpenChange, ...props }) { return ( <TooltipPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} > <TooltipPrimitive.Trigger asChild> {children} </TooltipPrimitive.Trigger> <TooltipPrimitive.Content side="top" align="center" {...props}> {content} <TooltipPrimitive.Arrow width={11} height={5} /> </TooltipPrimitive.Content> </TooltipPrimitive.Root> ); } ```

Give your agent this brain