Tooltips: Tooltips are floating labels to describe or add additional information when users hover over, focus on, or click an interactive element. Usually 3 words or less.
Popovers: A popover displays rich content in a non-modal dialog to describe or add additional information when users hover over, focus on, or click an interactive element. User can interact with popover content, including selecting text or clicking links. Coach Marks:
Modals: Modals show additional content in a layer above the page with an overlay covering the page behind. Use sparingly.
For text only, use a tooltip.
For rich content, such as a heading, link, or data, use a popover.
For contextual content, use a popover.
For a temporary change of context, use a modal.
For forms or images, use a modal.
We rarely use Coach marks, which are visually similar to popovers.
In Performance, we use drawers.
Here are some examples of existing design systems: