Open In App

Bootstrap 5 Popovers

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
2 Likes
Like
Report

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:

AspectDescription
Four directionsThe 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 clickThe popover can be dismissed on the next click by adding the data-bs-trigger="focus" attribute.
Disabled elementsTo 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.
SassSass is a pre-processor scripting language for CSS. It allows manipulation of popover styles using variables and is compatible with all CSS versions.
UsageThe popover JavaScript code is inserted into the popover element after triggering it. It generates the popover header and content.
OptionsPopover options can be passed through data attributes or JavaScript.
MethodsMethods add functionality to popover elements. Available methods include: show, hide, toggle, dispose, enable, disable, toggleEnabled, update, getInstance, and getOrCreateInstance.
EventsEvents 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=
"http://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"http://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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=
"http://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"http://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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


H

hiteshreddy2181
Improve
Article Tags :

Explore

Lightbox