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.
1 | <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a> |
jQuery is required to enable the popovers on a page. You can call the popover() method for this. See the code for example:
1 2 3 4 5 | <script> $(document).ready(function() { $('[data-toggle="popover"]').popover(); }); </script> |
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
Check the below code snippets for examples:
1 2 3 4 | <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a> <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a> <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a> <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a> |
Bootstrap Closing Popovers
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:
1 | <a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a> |
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:
1 | <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a> |
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