> ## 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 – Code

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

<Tabs>
  <Tab title="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.
  </Tab>

  <Tab title="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.

    <ParamField path="content" type="ReactNode" required>
      Visible tooltip content.
    </ParamField>

    <ParamField path="accessibilityLabel" type="string">
      Accessible name for the pill as a whole. Defaults to the content's own
      text.
    </ParamField>

    <ParamField path="caret" type={`"up" | "down" | "left" | "right"`}>
      Edge and tip direction for the caret. Omit for a bare pill.
    </ParamField>

    <ParamField path="testID" type="string">
      Test hook forwarded to the root element.
    </ParamField>
  </Tab>
</Tabs>