# Tooltip

> A tooltip is a short label that explains a control, shown when it is pointed at or long-pressed. Material 3 has plain and rich tooltips, and Apple shows tooltips only in macOS and visionOS.

Page: https://www.appetiteui.com/glossary/tooltip. Tooltip on mobile: Material 3 plain and rich, none on iPhone. Also called Help tag, Hint.

## Why it matters

On a touch screen there is no hover, so a tooltip cannot be the only place a label lives. It helps an icon-only control, but the label has to exist for screen readers and for people who never long-press.

The two platforms differ: Material 3 has the pattern, iPhone has none.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | No tooltip on iPhone: help tags in macOS and visionOS | Plain tooltip and rich tooltip | Tooltip |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Tooltip | No counterpart | M3 / Plain Tooltip and Rich Tooltip | The Apple pages have no tooltip |

## In Appetite UI

Tooltip is a 48 tall bubble at radius 12 with a 16 by 8 pointer and four positions, and the anchor is part of the component. The docs page says where the Material sizes differ.

## Example

A map screen has an icon-only layers button. A long press shows a plain tooltip reading Map layers, and the button also carries that label for VoiceOver and TalkBack.

## Common mistakes

- Hiding an essential label in a tooltip. Show it, or give the control a visible name.
- Rich content in a plain tooltip. Use the rich kind or a sheet.
- Relying on hover on a phone.
- A tooltip that covers the control it explains.

## Questions

### Does iOS have tooltips?

In macOS and visionOS the system shows a tooltip after people hover over a button for a moment. iPhone has no tooltip, so a label or an accessibility label has to carry the meaning.

### What is the difference between a plain and a rich tooltip?

A plain tooltip is a single or multi-line text label. A rich tooltip is a larger card that can hold a title, text and an action.

## Sources

1. [Apple Human Interface Guidelines: Buttons](https://developer.apple.com/design/human-interface-guidelines/buttons)
2. [Material Design 3: Tooltips](https://m3.material.io/components/tooltips/overview)

## Related

- Docs: [Tooltip](https://www.appetiteui.com/docs/tooltip)
- Docs: [Material 3](https://www.appetiteui.com/docs/material-3)
- Glossary: [Toast and snackbar](https://www.appetiteui.com/glossary/toast-snackbar)
- Glossary: [Touch target](https://www.appetiteui.com/glossary/touch-target)
- Glossary: [Context menu](https://www.appetiteui.com/glossary/context-menu)