---
title: "InfoTip"
description: "A small round ⓘ beside a label that explains it in plain words. It opens on a click, a tap or the keyboard, so it reaches touch screens, unlike a tooltip."
---

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

# InfoTip

## Beside a metric

```tsx
import { InfoTip } from '@arbol-ai/ui';

<div className="space-y-1">
  <p className="text-muted-foreground flex items-center gap-1 text-sm">
    Answer rate
    <InfoTip label="Answer rate">
      The share of calls the agent answered within three rings, over the selected dates.
    </InfoTip>
  </p>
  <p className="font-heading text-2xl font-medium">94%</p>
</div>
```

## A longer explanation

```tsx
import { InfoTip } from '@arbol-ai/ui';

<div className="flex items-center gap-1 text-sm font-medium">
  Business hours
  <InfoTip label="Business hours">
    <p>Outside these hours the agent still answers, but it books no appointments.</p>
    <p>Holidays follow the calendar of the clinic’s country.</p>
  </InfoTip>
</div>
```

## Source

The examples above are [`src/components/info-tip/info-tip.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/info-tip/info-tip.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/overlays/info-tip/index.mdx