Popover
A panel a button opens over the page, for a short task beside it: editing a link, picking a color, a few words of help. Specification: docs/components/popover.md
Basics
A panel a button opens over the page, for a short task beside it: a popover with role="dialog", named by its title (aria-labelledby) or aria-label, opened by the button's popovertarget. It opens under the button and flips to fit. Clicking outside, Escape or moving focus elsewhere closes it, and focus goes back to the button; opening it moves focus to its first field.
Edit link
Anatomy
Open: an optional .canon-popover-title, then anything: a form with its actions, choices, a few words and a link.
Edit link
Choices
A few choices that apply at once, such as Swatches for a text color, need no actions.
Words
A few words and a link, for help beside a control. (A tooltip shows a short name or hint on hover; a popover is opened on purpose and can hold a link.)
How billing works
You pay for the seats in use on the first of each month. Removing a member frees their seat at once.
Read the billing guideSize
data-size on the popover or a container sizes what is in it, its padding and its corners.
Edit link
Edit link
Edge cases
Right to left: the popover opens from the button's right edge.