How to Create Bootstrap 5 Popovers?

Popover is nothing but a larger tooltip shown in a popup box and pointing towards the triggered element. Similar to Bootstrap tooltip component, popover component also requires a third party JavaScript library popper.min.js for positioning. You can refer the complete Bootstrap starter template for using the required CSS and script files.

Bootstrap 5 Popovers Tutorial

1. Getting started with Bootstrap popover
2. Initializing Bootstrap component
3. Popover on buttons
4. Positioning of popover
5. Dismissible popover
6. Customizing popover

1. Getting Started with Popover

Before using popover component remember the followings:

• Popover needs tooltip plugin which means you should include “bootstrap.min.js” file in your HTML template.
• It also needs a third party JavaScript library “popper.min.js” for appropriate positioning.
• With Bootstrap 4, you can use the precompiled “bootstrap.bundle.min.js” file containing “bootstrap.min.js” and “popper.min.js”.
• In order to improve the performance of page loading, by default popover will not load on page. You should explicitly initialize with the parent element to load the popover.
• Popover will not be shown when there is no title or content inside the popover.
• Default popover will hide only if you click on the triggered element again. Otherwise it will be shown even you scroll the content on the page.
• Dismissible popover will be hidden when you click on anywhere.

2. Initialization of Popover

Like tooltips, popovers also need to be initialized before usage. The most generic way is to initialize globally like below:

<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>

If you see the styles are interfering code with the popover then you can define a separate container for specific element.

<script>
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
</script>

Remember to include the initialization script right after “popper.min.js” and “bootstrap.min.js” scripts.

3. Popover on Button

Let us start adding a popover on a button element:

<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading.">
Large Button Element
</button>

In case if you have initialized for body then you should add data-container=”body” attribute to the button.

While tooltips are shown on hover, popovers are shown only after clicking the element. In the above example code, clicking on the button element will trigger the popup box in the right direction as shown below:

4. Positioning Popovers

Popovers can be positioned in four directions – left, right, top and bottom to the triggering element. It is achieved using “data-placement” attribute like the code below:

<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="left" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading.">
Popover on Left
</button>
<button type="button" class="btn btn-danger" data-toggle="popover" data-placement="right" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading.">
Popover on Right
</button>
<button type="button" class="btn btn-info" data-toggle="popover" data-placement="top" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading.">
Popover on Top
</button>
<button type="button" class="btn btn-success" data-toggle="popover" data-placement="bottom" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading.">
Popover on Bottom
</button>

Different positioning of popovers are shown below:

5. Dismissible Popover

By default popover will appear when you click on the element and disappear when clicking on the element again. It will not disappear when you clicked randomly on the page outside the element. You can create a dismissible popover using the below code:

<a tabindex="0" class="btn btn-lg btn-warning" role="button" data-toggle="popover" data-trigger="focus" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading.">
Dismissble Popover on A Tag
</a>

The data-trigger=”focus” attribute is used so that the popover appears / disappears on highlighting with keyboard tab key.

Note that the <a> tag is used instead of <button> along with “tabindex” attribute in order to ensure compatibility on different browsers.

6. Customizing Popovers

All customizing options used in tooltip component can be used with popover too. You can disable the animation, delay the animation and insert HTML content using data attributes. Some of the important data attributes are given below:

• data-animation will enable or disable the animation of popover.
• data-delay is used to adjust the show / hide animation delay.
• data-title is used to show the title or header for popover content.
• data-trigger is used to trigger the popover on click, focus or hover.
• data-html is used to add HTML content inside popover.

---

---