What problem does this solve?
Popovers are designed to give secondary content about a particular element to a page or contain further options/actions for the user in a container. The popover interaction is lighter/faster/nicer for small interactions because it keeps the user in the context of the action.
When and how to use this component
- When you have more information you need to present to the user as a secondary.
- When you have more information that would typically be contained in a Tooltip.
- When you want to give the user secondary options/actions and a traditional Bootstrap dropdown isn’t large enough.
- If you require more detailed secondary information, consider using a modal dialog instead.
- Only one popover can be open at any one time.
- Popovers can be fired from any clickable object within an interface including buttons, clickable icons, and links.
- Clicking anywhere on the screen should dismiss the popover.
- If a screen is resized, the popover should open within the viewport at all times.
Advanced Popover (any HTML)
The following example shows how you can include custom HTML into your popover.
.popover-sl (200px wide)
.popover-md (400px wide)
.popover-lg (600px wide)
.popover-xl (800px wide)