> ## 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 - React Native

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

> [!NOTE]
>
> For development, import `TooltipSurface` from
> `@servicetitan/anvil2-rn`. For design, find it in the
> [Mobile Agentic Component Library file](https://www.figma.com/design/gjGWnAOnI1kukfzjsUQ6dP/Mobile-Agentic-Component-Library).

**Implementation**

```tsx theme={null}
import { TooltipSurface } from "@servicetitan/anvil2-rn";

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

## 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. Touch has no hover, so a host that owns open and dismiss wraps this surface rather than reimplementing the pill.

```tsx theme={null}
<TooltipSurface content="Invoice total: $420" caret="down" />
```

`content` accepts a string or composed nodes. A plain string or number is wrapped in the tooltip's typography. `caret` places a caret on the matching edge and points its tip away from the pill. The surface draws that direction only; the host decides where the pill sits.

```tsx theme={null}
import { Text, TooltipSurface } from "@servicetitan/anvil2-rn";
import { View } from "react-native";

<TooltipSurface
  content={
    <View style={{ flexDirection: "row", gap: 12 }}>
      <Text text="Revenue" />
      <Text text="$42,000" />
    </View>
  }
  caret="left"
  accessibilityLabel="Revenue $42,000"
/>
```

## Accessibility

* The pill is read as a single element so composed rows do not announce as fragments.
* Set `accessibilityLabel` when composed `content` does not form a sentence.
* Nested interactive controls inside `content` are swallowed on iOS because the root is accessible.

**TooltipSurface Props**

```tsx theme={null}
<TooltipSurface content="Invoice total: $420" caret="down" />
```

## `TooltipSurface` Props

The `TooltipSurface` accepts the following props. It does not forward remaining React Native `View` props.

**content** `ReactNode` *required*

Visible tooltip content.

**accessibilityLabel** `string`

Accessible name for the pill as a whole. Defaults to the content's own
text.

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

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

**testID** `string`

Test hook forwarded to the root element.


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