Popover

"A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out."

Example

Click the button to open the popover. This type of popover is a modal popover, so the rest of the page is blocked.

Tooltip

In this example, the popover opens when the pointer hovers over the button. This type of popover is a non-modal popover, so the rest of the page is not blocked.

Guidelines

tbd

Accessibility

• Escape always dismisses the popover.
• Aria attributes indicate the role and state.
• Popovers can be modal or non-modal. Non-modal popovers do not block interactions on the page while it is open.

References

• Dialog (Modal) Pattern
• Tooltip Pattern