Help Tooltip
The Help Tooltip component displays help on click
Table of Contents
Edit this section, Opens in new windowOverview
The Help Tooltip component is based on the Popover component and the Icon Button component.
Usage
Style
The Help Tooltip component is based on the Popover component and the Icon Button component, but the Help Tooltip Popover is _ only_ BR 1, BROWN, never red.
Principles
Interaction
Positioning
If the Help Tooltip button is over a certain treshold in the viewport, the Help Tooltip Popover should automatically be placed over or under the Help Tooltip button.
Desktop
The Help Tooltip is center aligned with the button, top or bottom, and the arrow should also be aligned accordingly. In situations where the Help Tooltip Popover would be placed outside of the viewport horizonally to the left, the Help Tooltip Popover is aligned to the left of the container. The arrow is always aligned to where it is initiated from.
Mobile
The Help Tooltip is always centered in the viewport and the arrow is always centered to the button.
Behaviours
There is currently no documentation for this section yet. However, there might be some more documentation after this section.
Contact the Design System team, Opens in new window for questions.
If you want to contribute, you can also add the documentation yourself!, Opens in new window
Accessibility
- When a help tooltip opens, the focus moves to the close button.
- The help tooltip container traps focus, preventing the user from interacting with the rest of the page until the help tooltip is closed.
- When help tooltip is closed (by clicking on Close button or outside of the tooltip or pressing Escape button), focus should be returned to the element that triggered it.
- Touch area
- Button
Anatomy
- Icon Button with Help Icon
- Popover
- Close
- Title (optional)
- Text