The Help Tooltip component displays help on click
Table of ContentsEdit this section, Opens in new window
OverviewEdit this section, Opens in new window
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.
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.
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.
The Help Tooltip is always centered in the viewport and the arrow is always centered to the button.
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
- 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.