## Info Tip (S—180)

A small (i) next to a label that opens a toggletip on click or focus, with a Learn more link; works on touch.

- URL: https://sundaeui.dev/components/info-tip
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/info-tip.json`
- Tags: hint, popover, help, info, tooltip, toggletip

Unlike hover-only tooltips, this opens on click and on keyboard focus, so it works on phones and can hold a link. It positions above or below and closes on Escape or outside click.
The content is announced through a live region when opened, the accessible toggletip pattern.

### Usage

```tsx
import { InfoTip } from '@/components/sundae/info-tip'

<InfoTip />
```

### Props

- `children` (`ReactNode`, required): Tip content.
- `label` (`string`, default `'More info'`): Accessible name for the button.
- `href` (`string`): Optional Learn more link.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Explaining a field, metric or setting in place.

### When not to use

- Essential instructions: put them in the UI.

### Accessibility

- A button with aria-expanded; content is rendered in a polite live region when opened (toggletip pattern).
- Escape closes and keeps focus on the button.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Enter / Space: Toggle
- Esc: Close