diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md index a32d5b8570..113e4f80b1 100644 --- a/modules/primer-popover/README.md +++ b/modules/primer-popover/README.md @@ -44,7 +44,7 @@ Popovers are used to bring attention to specific user interface elements, typica {:toc} -Popover's consist of: +A popover consist of: - The block element, `.Popover`, which simply positions its content absolutely atop other body content. - The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual "caret." @@ -53,19 +53,23 @@ In the examples below, `Popover-message`, in particular, uses a handful of utili The `Popover-message` element also supports several modifiers, most of which position the caret differently: -- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered. -- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered. -- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered. -- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered. +- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered. +- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered. +- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered. +- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered. Each of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like: -- `.Popover-message--top-right` -- `.Popover-message--right-top` -- `.Popover-message--bottom-left` -- `.Popover-message--left-bottom` +- [`.Popover-message--bottom-left`](#bottom-left) +- [`.Popover-message--bottom-right`](#bottom-right) +- [`.Popover-message--left-bottom`](#left-bottom) +- [`.Popover-message--left-top`](#left-top) +- [`.Popover-message--right-bottom`](#right-bottom) +- [`.Popover-message--right-top`](#right-top) +- [`.Popover-message--top-left`](#top-left) +- [`.Popover-message--top-right`](#top-right) -Lastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px. +Lastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px. ### Notes @@ -105,92 +109,165 @@ Defaults to caret oriented top-center. ``` -### Top-right-aligned example +### Bottom -```html title="Top-right" -