Popovers
Popovers are small overlay content containers that appear on top of a page, summoned by a user action. They are used to provide additional context or information about a specific element.
Placement
Popovers start invisible and appear and appear as configured relative to the element that triggered them. They can be placed on the top, bottom, left, or right of the triggering element.
Behavior
Popovers can be dismissed by clicking outside of them, or by clicking the X within.
Accessibility Guidelines
Please configure the popover with a color contrasting the background it is placed upon appropriately.
Conventions
Popovers are usually attached to Closeout Xs, Info Is, link-alikes, and images
Dependencies
- Font Awesome
- Bootstrap
Instructions
Import popover.js and popover.css into your project. Add the following attributes to the element you want to trigger the popover:
- data-popover-title: The title of the popover
- data-popover-html: The content of the popover
- data-popover-light: Whether the popover should be light or dark
- data-popover-pos: The position of the popover relative to the element. Consists of main position and alignment, separated by a dash. The following table shows the possible combinations and where this setting places the popover relative to the spawner element:
| top-left | top-center | top-right |
| left-up | ELEMENT | right-up |
| left-middle | ELEMENT | right-midde |
| left-down | ELEMENT | right-down |
| bottom-left | bottom-center | bottom-right |
Component Examples
Click on elements below to test the popover in different configurations. The title will contain the position configuration.
John Doe
John Doe
John Doe