Best practices
Toggletips reveal supplemental content when a user clicks an interactive UI trigger element e.g. a button, link or icon button. It stays open until a user dismisses it by either clicking outside the toggletip or on the trigger element again.
A toggletip is comprised of a UI trigger and the Toggletip component. Toggletips can include a range of information and interactive elements such as text, links and buttons. Toggletips are revealed by click rather than by hover.
When to use
- If the content contains interactive elements such as links.
When not to use
- If it does not have any interactive content – consider using Tooltip instead.
Anatomy
- Component
- Toggletip title (optional)
- Toggletip text
- Link
- Trigger UI element: The element that triggers the tooltip on hover or focus.
Behaviour
Toggletips are triggered when the user clicks a trigger element or gives focus to the element and hits Enter. To close/dismiss a toggletip, the user must either click outside the toogletip or click the trigger element again.
Toggletips vs. tooltips
Toggletips and tooltips are similar visually and both contain a popover element and a UI trigger element. The main difference in the two is in the way they are triggered and dismissed and the nature of the contents.
- A tooltip is revealed on Hover or Focus when you need to show short, supplemental non-interactive information.
- A toggletip is revealed on Click and Enter, and contains interactive elements, such as a link or button, that a user can interact with.
Placement
Consider different screen sizes when deciding placement. See more details about the 12 placement options in Tooltip placement.
|
✅ Do |
🛑 Don’t |
|---|---|
|
Do make sure toggletips are placed clearly and fully within view. |
Don’t keep placement the same as on larger devices if it means information is obscured or outside of view. |