Popover
The Popover is a floating element that presents additional information to the element on screen.
The Popover can be triggered by clicking on a certain element or automatically by loading the page.
Once opened, it can be closed with any click outside of it or it can remain open until there is interaction with it, by clicking on its actions or clicking on the "Close" button.
Only one Popover can be active on a page at a time.
Transactional popover
Used to bring additional information to a certain element on the screen, must contain at least a short description and may contain a short title.
It can also contain an illustration, link in description and up to 2 buttons.
It can also remain open until one of its actions is taken. In these cases, it is recommended to display the ”Close” button.
When to use
- To bring additional information related to a certain element or subject
- To offer additional actions related to a certain element or subject
Highlight popover
Is used in order to introduce new elements or functionalities in a screen or flow (Onboarding).
It may contain a short title, a descriptive text with a link and up to two buttons, which can be used to navigate between Popovers in guided Onboardings.
It should remain open and will only be closed using the ”Close” button.
When to use
- To introduce new elements or functionality on a page
- For more information on creating Onboardings, visit our docs
Texts
Title
- Concise and clear: It should be brief and clearly communicate the purpose or action associated with the Popover. Avoid technical terms.
- Consistent: Keep language consistent with the tone and voice of RD Station products. This helps create a familiar experience.
- Highlight key information: Highlight keywords or important details of the information. This helps in identifying the context or purpose of the Popover.
Description
- Succinct and objective: Say the additional information or relevant instructions in an objective way. Avoid long texts or texts that require a high cognitive load to be understood.
- Clear and accessible language: It must be easy to understand by anyone, regardless of maturity in relation to the product. Avoid technical or formal terms.
- Relevance: Focus on the most important information for those reading. Avoid excesses or unnecessary details. What does the person really need to know?
- Proper Format: Use bold, italic or colors to highlight important information or highlight parts of the description. This helps to improve the readability and scannability of the text.
Actions
- Match the text of the action with the verb in the title, to create a double confirmation in an organic way.
- Always offer the option to “cancel” the action.
- If you need to link the Popover to external information, use a link in the description.