Bootstrap

Popovers in Bootstrap 5

Popovers are similar to tooltips but they contain more information regarding a particular element and only show its content when a user clicks on them. Popovers can be dismissed only by clicking on the element again. The purpose of popover is to give user knowledg about website or how to use it. It is also used to give descriptive knowledge about a product when the user demands it.

This article tells you about

  • Popover Creation Process
  • Popover Positions
  • Closing Popover
  • Popover on hovering

How to Create Popovers

To create a popover, add data-bs-toggle=”popover” and title=”Popover header text goes here” for popover’s header section and data-bs-content=”Popover body text goes here” for popover’s body section.

Code

<body>
    <div class="container" style="margin-top: 30px;">
        <button type="button"  class="btn btn-primary" data-bs-toggle="popover" title="Popover's Header" data-bs-content="This is popover's body" >Click</button>
    </div>

    <script>
        $(document).ready(function(){
        $('[data-bs-toggle="popover"]').popover();
        });
    </script>
</body>

This process creates and enables a basic popover.

Popover Positions

So popovers are also positioned just like tooltips, to position a popover use data-bs-placement=”top/bottom/right/left” attribute with data-bs-toggle, title and data-bs-content attributes.

Code

<div class="container" style="margin-top: 30px;">
    <h3>Popover Positions</h3>
    <br><br>
    <button type="button"  class="btn btn-primary"  data-bs-placement="top" data-bs-toggle="popover" title="Top Header" data-bs-content="" >Top</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button"  class="btn btn-secondary" data-bs-placement="bottom" data-bs-toggle="popover" title="Bottom Header" data-bs-content="" >Buttom</button><br><br><br>
    <button type="button"  class="btn btn-danger"  data-bs-placement="left" data-bs-toggle="popover" title="Left" data-bs-content="" >Left</button>&nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button"  class="btn btn-warning"  data-bs-placement="right" data-bs-toggle="popover" title="Right Header" data-bs-content="" >Right</button>
</div>

This is how popover positions are specified.

Closing Popovers

Popovers are closed only when you click the element or button again to which you click before to make it visible. However, if you want to close the popover by clicking anywhere on the screen, just add data-bs-trigger=”focus” attribute to your button or element.

Code

<h3>Closing Popover</h3>
<br>
<button class="btn btn-warning"  data-bs-trigger="focus" data-bs-toggle="popover" title="Close Popover" data-bs-content="Click anywhere on the screen to close this popover" >Click me</button>

This process closes a popover when you click anywhere on the screen. 

Popover on hover

As we know popovers are only visible when clicking on a button or element, but if you want that popover to be visible just by hovering the cursor over the element or button just like the tooltip, then add the data-bs-trigger=” hover” attribute to your button or element.

Code

<h3>Popover on hover</h3>
<br>
<button class="btn btn-warning"  data-bs-trigger="hover" data-bs-toggle="popover" title="Hovering Popover" data-bs-content="This popover appears just by hovering the cursor" >Hover</button>

This is how popover appears on hovering.

Conclusion

Popover is created by adding the data-bs-toggle=“popover” attribute. Its header is created by adding Title=“Header Text” attribute and its body is created by adding the data-bs-content=“body text” attribute to your element or button. To enable popover to write a javascript code as written in the article. As popover is closed only by clicking on the element or button again, so for closing by clicking anywhere on the screen just add data-bs-trigger=“focus” attribute, and if you want to open popover by hovering the cursor only add attribute data-bs-trigger=“hover”.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.