Bootstrap 5 Popovers

Last Updated : 23 Jul, 2025

Bootstrap 5 Popovers Provides directional placement options (top, bottom, left, right), dismiss on click, and support for disabled elements. Styled with Sass, they feature various methods, options, and events for dynamic interaction and customization.

Bootstrap 5 Popovers:

Aspect	Description
Four directions	The popover can be placed on the top, bottom, left, or right of the element using the `data-bs-placement` attribute. By default, it is placed on the top.
Dismiss on click	The popover can be dismissed on the next click by adding the `data-bs-trigger="focus"` attribute.
Disabled elements	To show a popover message on disabled elements, use `data-bs-trigger="hover focus"` so that the popover appears when the user hovers over the element.
Sass	Sass is a pre-processor scripting language for CSS. It allows manipulation of popover styles using variables and is compatible with all CSS versions.
Usage	The popover JavaScript code is inserted into the popover element after triggering it. It generates the popover header and content.
Options	Popover options can be passed through data attributes or JavaScript.
Methods	Methods add functionality to popover elements. Available methods include: `show`, `hide`, `toggle`, `dispose`, `enable`, `disable`, `toggleEnabled`, `update`, `getInstance`, and `getOrCreateInstance`.
Events	Events are triggered when corresponding methods are called. Events include: `show.bs.popover`, `shown.bs.popover`, `hide.bs.popover`, `hidden.bs.popover`, and `inserted.bs.popover`.

Examples of Bootstrap 5 Popovers

Example 1: In this example Bootstrap 5 Popover integrated via data attributes and JavaScript, enabling dynamic interaction and styling. Utilizes Bootstrap's Popover component for tooltips and interactive content display with ease.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body class="text-center">
    <h4>Bootstrap 5 Popover </h4>
    <a href="#" 
       data-bs-toggle="popover" 
       title="GeeksforGeeks" 
       data-bs-trigger="focus">
        popover
    </a>

    <script type="text/javascript">
        let popoverTrigger =
            [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
        let popoverList = popoverTrigger.map(function (popoverTrigger2) {
            return new bootstrap.Popover(popoverTrigger2)
        })
    </script>
</body>

</html>

Output:

Bootstrap-5-Popovers — Bootstrap 5 Popovers Example Output

Example 2: In this example Bootstrap 5 Popover integrated with data attributes for trigger and content placement. Utilizes JavaScript for initialization, enabling interactive tooltips on disabled elements.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body>
    <div class="container text-center">
        <h3> Bootstrap 5 Popover </h3>
        <span data-bs-toggle="popover" 
              data-bs-placement="bottom" 
              data-bs-content="popover on bottom"
               data-bs-trigger="hover focus">

            <button type="button" 
                    class="btn btn-info" disabled>
                Popover
            </button>
        </span>

    </div>

    <script type="text/javascript">
        let popoverTrigger =
            [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
        let popoverList = popoverTrigger.map(function (popoverTrigger2) {
            return new bootstrap.Popover(popoverTrigger2)
        })
    </script>
</body>

</html>

Output:

Bootstrap-5-Popovers2 — Bootstrap 5 Popovers Example Output

Bootstrap 5 Progress

hiteshreddy2181

Improve

Article Tags :

Bootstrap 5 Popovers

Examples of Bootstrap 5 Popovers

Similar Reads

Layout

Content

Forms

Forms Layout

Components

Navbar

Helpers

Extend

Thank You!

What kind of Experience do you want to share?