What is Popover component in Bootsrap?

Bootsrapmarkup~5 mins

Popover component in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

A popover shows extra information when you click or hover on an element. It helps keep the page clean but still gives details when needed.

You want to explain a button or icon without cluttering the page.

You need to show tips or hints on form fields.

You want to display extra info on images or links without opening a new page.

You want a small popup with actions or details on user interaction.

Syntax

Bootsrap

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

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl);
  });
</script>

The data-bs-toggle="popover" attribute activates the popover on the element.

You must initialize popovers with JavaScript for them to work.

Examples

A basic popover triggered by click (default).

Bootsrap

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Info" data-bs-content="This is a simple popover.">Hover me</button>

This popover appears when you hover over the button.

Bootsrap

<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-trigger="hover" title="Hover Popover" data-bs-content="Shows on hover.">Hover me</button>

This popover appears on the right side of the button.

Bootsrap

<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="right" title="Right Popover" data-bs-content="Appears on the right.">Click me</button>

Sample Program

This page shows a blue button. When you click it, a small box with a title and message appears near the button.

Bootsrap

<!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>
  <main class="p-4">
    <button type="button" class="btn btn-info" data-bs-toggle="popover" title="Hello!" data-bs-content="This is a popover example.">Click me</button>
  </main>

  <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(el => new bootstrap.Popover(el));
  </script>
</body>
</html>

OutputSuccess

Important Notes

Popovers need JavaScript initialization to work properly.

Use data-bs-trigger to change how the popover shows (click, hover, focus).

Popovers are good for extra info but avoid putting too much content inside them.

Summary

Popovers show extra info on user interaction without cluttering the page.

Use data-bs-toggle="popover" and initialize with JavaScript.

You can customize trigger, placement, title, and content easily.