Tooltip Surface

For development, import TooltipSurface from @servicetitan/anvil2-ai-kit. For design, find it in the AI Kit Web Component Library file.

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.

Last modified on October 27, 2026

⌘I

Concepts & Guidelines

Anvil2

Resources

Tooltip Surface - Web

Common Examples

React Accessibility

`TooltipSurface` Props

​Common Examples

​React Accessibility

​TooltipSurface Props

Common Examples

React Accessibility

`TooltipSurface` Props