> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tooltip Surface - Web

> The TooltipSurface renders a visible tooltip pill and optional caret without trigger or positioning behavior.

> [!NOTE]
>
> For development, import `TooltipSurface` from
> `@servicetitan/anvil2-ai-kit`. For design, find it in the
> [AI Kit Web Component Library file](https://www.figma.com/design/QEIsArLktLeJAaFvcpw3PO/AI-Kit-Web-Component-Library).

**Implementation**

ai-kit-tooltip-surface

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-tooltip-surface?file=src/App.tsx)

```tsx lines expandable theme={null}
import { TooltipSurface } from "@servicetitan/anvil2-ai-kit";

function App() {
  return <TooltipSurface content="Invoice total: $420" caret="down" />;
}

export default App;
```

## 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.

```tsx theme={null}
<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.

ai-kit-tooltip-surface-composed

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-tooltip-surface-composed?file=src/App.tsx)

```tsx lines expandable theme={null}
import { TooltipSurface } from "@servicetitan/anvil2-ai-kit";

function App() {
  return (
    <TooltipSurface
      content={
        <span style={{ display: "flex", gap: 12 }}>
          <span>Revenue</span>
          <strong>$42,000</strong>
        </span>
      }
      caret="left"
    />
  );
}

export default App;
```

## React Accessibility

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

**TooltipSurface Props**

## `TooltipSurface` Props

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

**content** `ReactNode` *required*

Visible tooltip content.

**caret** `"up" | "down" | "left" | "right"`

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

**className** `string`

Class merged onto the surface.

**presentational** `boolean` (default: false)

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.