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
Mobile
If user touch and holds on the question mark icon the Help Tooltip should be displayed while holding. Technical
The component should not insert or move any elements in the DOM. The component should not self-initiate automatically. A dynamic update of tooltip text should be possible. Sizing
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
The click/touch area for the Help Tooltip Button is 48x48 px.
- Touch area
- Button
Anatomy
- Icon Button with Help Icon
- Popover
- Close
- Title (optional)
- Text