Tooltip Surface – Code

Implementation
TooltipSurface Props

Common Examples

Use TooltipSurface when another interaction already knows what to explain and where to place it, such as a chart overlay. It provides no trigger, open state, timing, or positioning.

<TooltipSurface content="Invoice total: $420" caret="down" />

For ordinary hover and focus help, use a fully wired tooltip instead.content accepts a string or composed nodes. caret places a caret on the matching edge and points its tip away from the pill.

React Accessibility

Pass presentational when the described element already exposes the same accessible name. This hides duplicate tooltip content from assistive tech.

`TooltipSurface` Props

The TooltipSurface accepts the following props and forwards remaining <div> attributes except children, HTML content, and style.

ReactNode

required

Visible tooltip content.

"up" | "down" | "left" | "right"

Edge and tip direction for the caret. Omit for a bare pill.

string

Class merged onto the surface.

boolean

default:"false"

Hides the content from assistive tech when it duplicates another accessible name.

AI Kit

Agent Experience

Tooltip Surface – Code

Common Examples

React Accessibility

`TooltipSurface` Props

​Common Examples

​React Accessibility

​TooltipSurface Props

Common Examples

React Accessibility

`TooltipSurface` Props