InfoTip

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>

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>