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.

There are four set sizes of container classes you can choose from to place in your JavaScript or the basic default size (which just wraps the content).

.popover-sl (200px wide)

.popover-md (400px wide)

.popover-lg (600px wide)

.popover-xl (800px wide)


Popover on right

This is a title

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.