Bootstrap 4 Popovers

Add a stylized overlay content with the Bootstrap popover component.

Bootstrap provides a popover component that displays, small overlay content, similar to that found in iOS.

Popovers rely on the 3rd party library Tether for positioning. Therefore, you need to ensure that you're calling the tether.min.js file on your web page (we already included this file when we were getting started with this tutorial).

Popovers also require the tooltips plugin.

Initialization

Bootstrap popovers are not enabled by default. They require initialization before you can use them.

One way to do this is to place the following code somewhere after the call to JQuery:

You can see an example of this by opening the above example in the Scratchpad Editor and scrolling down the code editor (left frame) until you see the above code.

Basic Popover

Here's a basic example of a popover.

Use data-toggle="popover" to specify the popover, and data-content="" to provide the content for the popover.

Popover Position

You can use data-placement to specify for the popover to appear at the top, bottom, left or right.

Here's a basic example of four popovers, each with a different placement.

<div style="text-align:center">
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="right" data-content="Chelsea boots are close-fitting, ankle-high boots with an elastic side panel." style="margin:40px;">
  Click me
</button>
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="bottom" data-content="Dress boots are short leather boots worn by men." style="margin:40px;">
  Click me
</button>
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" data-content="Cowboy boots are for cowboys." style="margin:40px;">
  Click me
</button>
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="left" data-content="Ski boots are for skiing... duh!" style="margin:40px;">
  Click me
</button>
</div>

Popover Title

Any title attribute you provide on the element will become the title of the popup.

Like this:

Closing Popovers

By default, popovers will close when the user clicks the element again (i.e. the one that triggered the popover).

You can make a popover close when the user clicks anywhere within the document (as opposed to the element that triggered it).

To close a popover like this, use data-trigger="focus":

Popovers on Hover

You can change it so that the popover is triggered by a mouseover event, rather than a click.

To do this, use data-trigger="hover":