Tooltip Surface – Code

Implementation
TooltipSurface Props

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.

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

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 content="Invoice total: $420" caret="down" />

`TooltipSurface` Props

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

ReactNode

required

Visible tooltip content.

string

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

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

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

string

Test hook forwarded to the root element.

​Common Examples

​Accessibility

​TooltipSurface Props

Common Examples

Accessibility

`TooltipSurface` Props