VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-popovers-usage/

⇱ Bootstrap 5 Popovers Usage - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Popovers Usage

Last Updated : 23 Jul, 2025

Bootstrap 5 popover is similar to the tooltips which have a pop-up box that appears when we click the element. We can insert the content into the popover box by using the attribute called "data-bs-content". We can also include interactive controls.

Bootstrap 5 Popovers Usage Events:

  • Options: Options can be passed as the data attribute in the element which performs a specified function. We can pass the data attributes by appending option names with the "data-bs-" like data-bs-animation="".
  • Methods: Methods are used to perform some tasks like the show, hide, toggle, dispose of, enable, disable, etc.
  • Events: Bootstrap popover calls the event automatically when some method is called for example when the show method is called the bootstrap javascript automatically calls triggers show.bs.popover. We also have shown.bs.popover, hide.bs.popover, hidden.bs.popover events.

Example 1: In this example, we will demonstrate popover options.

Output :

👁 Image
Bootstrap 5 popovers usage

Example 2: In this example we will demonstrate popover methods like the show, hide and toggle.

Output:

👁 Image
Bootstrap 5 popovers usage

Reference:  https://getbootstrap.com/docs/5.0/components/popovers/#usage

Comment

Explore