# InfoTip

> A `?` that explains the thing beside it: a field's label, a table column, a figure.

- Import: `import { InfoTip } from '@thekestongroup/ui'`
- Group: Overlay
- Live example: https://ui.keston.co/storybook/?path=/story/components-overlay-infotip--default
- Source: https://github.com/thekestongroup/ui/blob/main/src/components/InfoTip/InfoTip.vue

## When to use

- A short explanation most people won't need, beside the label it explains.
- Fields have it built in: `helperPlacement="icon"` on Input, InputNumber, InputDate, Select and RadioGroup.

## When not to use

- Anything people need to complete the task: put it on the page (e.g. helper text below the label).
- Naming an icon button: use Tooltip.
- Anything interactive: use Popover.

## Anatomy

| Part | Required | Notes |
|---|---|---|
| button | Yes | 16px `?` icon with 2px padding, fully rounded. |
| panel | Yes | Popover panel above it, up to 256px wide, 12px text. |

## Properties

| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | Required. A sentence or two. |
| label | string | — | Required. Accessible name, e.g. "About attendance". |

## States

| State | Appearance | Notes |
|---|---|---|
| Enabled | Black icon. | |
| Hovered / open | Black 10% circle behind it. | |
| Focused | 2px focus ring. | Keyboard only. |

## Behaviour

- Opens on hover, and on click / tap, which keeps it open (so it works on touch). Escape or clicking outside closes it.
- Focus never moves into it, so typing in a nearby field isn't interrupted.

## Accessibility

- A button named by `label`, with `text` as its description, so screen readers hear the explanation without opening it.
- In a field, the field's control is described by the same text, so it's heard there too.

## Platform adaptation

| Platform | Implementation | Differences |
|---|---|---|
| Web / desktop (Vue) | `InfoTip.vue` | Built on Popover (hover mode). |
| iOS (SwiftUI) | — | `questionmark.circle` button showing a `.popover`. |
| Android (Compose) | — | Icon button with a `RichTooltip`. |

## Tokens used

| Token | Used for |
|---|---|
| `color-focus` | Focus ring |

## API (from the source)

The component's exact props, model, events, slots and types, with their documentation comments.

```ts
// InfoTip.vue
/**
 * A `?` that explains the thing beside it: a field's label, a table column,
 * a figure. Opens on hover, and on click / tap (which keeps it open, so it
 * works on touch screens). Focus is never moved, so typing in a nearby
 * control isn't interrupted.
 */
export interface InfoTipProps {
  /** The explanation. Keep it to a sentence or two. */
  text: string
  /**
   * The button's accessible name: what it explains, e.g. "About Student ID".
   * Screen readers then hear `text` as its description.
   */
  label: string
  class?: HTMLAttributes['class']
}
```