Design System: Differentiating Tooltips from Popovers

[namigoeku]

Overview

Our design system does not differentiate between tooltips and pop-overs. Since popovers are editable and tooltips are not, we must differentiate them in the design system.

Action Items

• Differentiate popovers from tooltips
• Update design system with section for popovers and tooltips

Tooltip vs. Popover
A tooltip is used to give the user hints or help them to complete an action. They are activated on hover and are non-interactive. A popover is used to give the user more detail about how to complete an action. They can include links, are clickable, and can support larger text area.

Example of tooltip vs popover

Resources/Instructions

Link to issue #1903 - Create mockups for editing tooltips
Github Design System - Popovers
Github Design System - Tooltips