Bootstrap4 Popover

The popover control is similar to a tooltip. It displays upon clicking an element, and unlike a tooltip, it can show more content.

How to Create a Popover

Create a popover by adding data-toggle="popover" to an element.

The title attribute contains the popover's title, and the data-content attribute displays the popover's text content:

<a href="#" data-toggle="popover" title="Popover Title" data-content="Popover Content">Click Me</a>

Note: Popovers must be initialized with jQuery: then call the popover() method on the specified element.

The following example allows popovers to be used anywhere in the document:

Example

$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});

Specifying Popover Position

By default, the popover appears on the right side of the element.

You can use the data-placement attribute to set the direction of the popover: top, bottom, left, or right:

Example

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click Me</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click Me</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click Me</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click Me</a>

Usage in buttons:

Example

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

&lt;button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

Closing the Popover

By default, the popover closes when you click the specified element again. You can use the data-trigger="focus" attribute to close the popover by clicking outside the element:

Example

<a href="#" title="Dismiss Popover" data-toggle="popover" data-trigger="focus" data-content="Click elsewhere in the document to close me">Click Me</a>

Tip: If you want to achieve the effect of displaying content when the mouse moves over an element and hiding it when the mouse moves away, you can use the data-trigger attribute and set its value to "hover":

Example

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Move your mouse over me</a>