Popover

A popover is a short descriptive message that appears when a user clicks or focuses on an element.

When to use popovers

Popovers are useful when you have a large amount of information to communicate but your UI space is limited.

When to not use popovers

If the information is highly critical consider putting the information directly on the page.

Example

My Pronouns

<button type="button" class="popover-button" aria-controls="{id of popover bubble div}"><span class="hidden">{insert text to help users of screen reader understand what they are clicking on}</span></button> <div id="{insert custom popover bubble id here}" class="popover-content" role="tooltip" aria-label="Pronoun Tooltip"> {insert popover bubble html content here} </div>
Updated