Bootstrap - Popovers

Popovers in Bootstrap 5 are small overlay content boxes that appear when users click or hover over an element. They are useful for displaying additional information without taking up space on the page and are customizable with various options to control their look and behaviour.

In this post, we’ll cover:

Basic Popover Setup

JavaScript and Data Attributes

Customizing Popovers

Trigger Options

Positioning Popovers

Basic Popover Setup

Bootstrap popovers require Bootstrap’s JavaScript plugins and Popper.js (which comes included with Bootstrap 5) to work. You’ll also need jQuery if you’re working with a legacy project that uses it.

1. Adding the Bootstrap CSS and JavaScript

To get started, include the Bootstrap CSS and JavaScript files in your HTML file:

2. Basic Popover Usage

A popover is attached to an element using the data-bs-toggle="popover" attribute along with data-bs-content to set the popover content.

Click me for popover

</button>

To initialize the popover, you need to use JavaScript:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');

const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));

With this code, all elements with the data-bs-toggle="popover" attribute will have the popover functionality applied.

Customizing Popovers

Bootstrap popovers can be customized in terms of title, content, placement, and trigger.

Setting a Title

You can specify a title for the popover using the data-bs-title attribute.

Click me

</button>

HTML Content in Popover

To add HTML content, you can use the data-bs-html="true" attribute. This will allow HTML to be rendered inside the popover.

<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-html="true" data-bs-content="<b>Bold text</b> and <i>italic text</i> inside popover">

HTML Popover

</button>

Trigger Options

The trigger option controls when the popover appears. Common triggers include:

Click: Default. Activates the popover when clicked.

Hover: Shows the popover on hover.

Focus: Shows the popover when the element is focused.

Manual: Allows manual control of the popover.

You can set multiple triggers by separating them with a space.

Hover or Focus

</button>

Positioning Popovers

By default, popovers are placed top, but you can position them using the data-bs-placement attribute.

Placement Options

top

bottom

left

right

Example of setting a popover to appear at the bottom:

Bottom Popover

</button>

Programmatic Control of Popovers

Popovers can also be shown, hidden, or toggled using JavaScript.

// Select the popover element

const myPopover = new bootstrap.Popover(document.querySelector('#popoverButton'));

// Show the popover

myPopover.show();

// Hide the popover

myPopover.hide();

// Toggle the popover

myPopover.toggle();

Example with a Manual Trigger

When using the manual trigger, you can control when the popover appears programmatically.

Manual Popover

</button>

const manualPopover = new bootstrap.Popover(document.querySelector('#manualPopoverButton'));

document.querySelector('#manualPopoverButton').addEventListener('click', () => {

manualPopover.toggle();

});

</script>

Dismissing Popovers

If you want a popover to close when clicking outside it, use data-bs-trigger="focus", as it will dismiss the popover when focus is lost.

Focus Trigger

</button>

Full Example

Here’s a complete example that includes different types of popovers with various configurations:

<!DOCTYPE html>

<head>

<title>Bootstrap 5 Popover Example</title>

</head>

Basic Popover

</button>

Title Popover

</button>

<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-html="true" data-bs-content="<b>Bold</b> and <i>italic</i> content">

HTML Popover

</button>

Manual Trigger Popover

</button>

// Initialize all popovers

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');

const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));

// Manual control for specific popover

const manualPopover = new bootstrap.Popover(document.querySelector('#manualPopoverButton'));

document.querySelector('#manualPopoverButton').addEventListener('click', () => {

manualPopover.toggle();

});

</script>

</body>

</html>

This example demonstrates how to use popovers in various scenarios, including default, with titles, with HTML content, and with manual triggers.