BootstrapHow-ToBeginner · 3 min read

How to Create Popover in Bootstrap: Simple Guide

To create a popover in Bootstrap, add the data-bs-toggle="popover" attribute to an element and initialize it with JavaScript using new bootstrap.Popover(element). Popovers show small overlay content on click or hover, enhancing user interaction.

📐

Syntax

Use the data-bs-toggle="popover" attribute on an HTML element to enable a popover. You can add title and data-bs-content attributes to set the popover's header and body text. Then, initialize the popover with JavaScript.

data-bs-toggle="popover": Activates the popover on the element.
title: Sets the popover header text.
data-bs-content: Sets the popover body text.
JavaScript initialization: Required to enable popover functionality.

html

<button type="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="This is the popover content.">Click me</button>

<script>
  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
  const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
</script>

Output

A button labeled 'Click me' that shows a popover with title 'Popover title' and content 'This is the popover content.' when clicked.

💻

Example

This example shows a button that triggers a popover on click. The popover has a title and some content. The JavaScript code activates all popovers on the page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Popover Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Hello!" data-bs-content="This is a Bootstrap popover example.">Click me</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
  const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
</script>

</body>
</html>

Output

A blue button labeled 'Click me' on a white page. Clicking it shows a popover with the title 'Hello!' and the text 'This is a Bootstrap popover example.'

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap popovers include:

Not including Bootstrap's JavaScript bundle, so popovers don't work.
Forgetting to initialize popovers with JavaScript after the page loads.
Using data-toggle instead of data-bs-toggle in Bootstrap 5.
Not setting title or data-bs-content, resulting in empty popovers.

html

<!-- Wrong: missing JS initialization -->
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" title="Oops" data-bs-content="No JS init.">Click me</button>

<!-- Right: with JS initialization -->
<script>
  const popoverTrigger = document.querySelector('[data-bs-toggle="popover"]');
  new bootstrap.Popover(popoverTrigger);
</script>

Output

Without JS initialization, clicking the button does nothing. With initialization, the popover appears on click.

📊

Quick Reference

Attribute/Method	Description
data-bs-toggle="popover"	Enables popover on the element
title	Sets the popover header text
data-bs-content	Sets the popover body text
new bootstrap.Popover(element)	Initializes popover via JavaScript
trigger option	Controls how popover is triggered (click, hover, focus)

✅

Key Takeaways

Add data-bs-toggle="popover" and content attributes to your element to enable popovers.

Always initialize popovers with JavaScript using new bootstrap.Popover(element).

Include Bootstrap's CSS and JavaScript bundle for popovers to work correctly.

Use the correct Bootstrap 5 data attribute names starting with data-bs-.

Set meaningful title and content to make popovers useful and clear.