component
Toggletip
also called toggle tip, info popover, help bubble, info label (fluent)
A tip revealed by clicking rather than hovering, so it works by touch and may contain links or controls a tooltip could not.
A toggletip is the tip you have to ask for. The small “i” beside a field label is the classic one: press it and a surface appears holding a sentence of guidance and, often, a link to the longer version. It stays put until you dismiss it, because nothing about it depends on where the pointer went.
That is the whole difference from a tooltip, and it is a difference
of mechanism rather than of size. Hover has no touch equivalent and no keyboard
equivalent, so a hover-triggered tip cannot safely carry anything you are meant
to reach. A click can be made with any input device, which is why a toggletip is
allowed a link, and why its content is usually announced through a live region
instead of being tied to the button with aria-describedby. Against a
popover the line is narrower: a toggletip is a popover whose entire
job is to explain the control beside it.
Heydon Pickering drew that line, and named the toggletip, in Inclusive Components in 2017. Design systems have not agreed on the word since: Carbon ships a Toggletip, Fluent calls the same construction an info label, and plenty of teams say info popover or help bubble. Asking for a toggletip is the quickest way to rule out hover.
Which word?
| If you want | say |
|---|---|
| a hint you click open, not hover open | toggletip |
| a label that names the control under the pointer | tooltip |
| a small anchored surface with controls inside it | popover |
| judging whether a tooltip or flyout behaves | hoverable, dismissible, persistent |
| a teaching bubble pointing at a control | coach mark |
Implementations
Specimens illustrate the concept; for production use, start here.
| carbon | Toggletip |
| fluent | Info label |