Bootstrap Popover

The Popover component is a lot like the tooltips. It appears as a pop-up box when you click a certain component on the page.

However, a popover can contain more content than a usual tooltip element. Here, we will study the creation and controlling of the popover component in Bootstrap.

Bootstrap Toggle popover

For creating a popover, we need to add the data-toggle=”popover” attribute to the desired element.

The header of the popover can be specified using the title attribute. The data-content attribute can be used for the popover body.

jQuery is required to enable the popovers on a page. You can call the popover() method for this. See the code for example:

Bootstrap Positioning Popovers

The popovers are positioned right to the target element, by default.

You can use the data-placement attribute for changing the position to top, bottom, left or the right side of the element.

Check the below code snippets for examples:

Bootstrap Closing Popovers

Closing of popovers can also be controlled.

By default, it gets closed when you click on the target element again.

To close it by clicking anywhere outside the element, you can use the data-trigger=”focus” attribute. See the code below:

Setting data-trigger attribute with a value of “hover” will make the popover appear when you hover over the target element.

Check the following code for the same:

Bootstrap Popover Methods

Here’s a list of all the popover methods you can use to control different aspects of popover component in Bootstrap:

  • .popover(options): Used to activate the popover with some option. The list of options is as following:
    • animation
    • container
    • content
    • delay
    • html
    • placement
    • selector
    • template
    • title
    • trigger
    • viewport
  • .popover(“show”): Makes the popover appear
  • .popover(“hide”): Makes the popover disappear
  • .popover(“toggle”): For toggling the popover
  • .popover(“dispose”): Hides and destroys the popover
  • .popover(“enable”): To enable the popover. By default the popover is enabled and can be made visible by clicking (or hovering over) the target element.
  • .popover(“disable”): To disable the popover. Once disabled, the popover cannot be shown unless re-enabled.
  • .popover(“toggleEnabled”): To toggle the popover’s ability to be shown or hidden
  • .popover(“update”): To update the popover’s position

Bootstrap Popover Events

The different events for the popover component can be described as following:

  • bs.popover: The event of the popover being about to be shown
  • bs.popover: The event of the popover to be fully shown after all the CSS transitions are completed
  • bs.popover: The event of the popover being about to be hidden
  • bs.popover: The event of the popover fully hidden after all the CSS transitions are completed
  • bs.popover: The event of the popover template been added to the DOM after the show.bs.popover