Bootstrap 4 Popover

Bootstrap 4 Popover

Bootstrap 4 popover appears when user click on the elements while as bootstrap tooltip appears when user mouse moves to link or button.

Follow the given steps to create bootstrap 4 popover.

  • Add data-toggle="popover" attribute to an element.
  • Add title attribute to show the header text information of the popover.
  • Add data-content attribute to show the the text information that will be exist inside the popover's body.
  • Select the element and call the popover() method using jQuery.

General Syntax

Try it now

Source Code

Try it now

Note:Please keep in mind that bootstrap popover is initialized with the help of bootstrap popover method using jquery.

Note: Bootstrap popover is similiar to tooltips but popover displays when the user clicks on the element.

Popover Positioning

Generally,the popover will appear on the right side of the element.data-placement attribute provides facility to show popover on top, bottom, left or the right side of the element.

General Syntax

Try it now

Source Code

Try it now

Note:Bootstrap popover position is decided based on data-placement property of popover.

Closing Of Popover

If you like to close popover by clicking outside of popover,use data-trigger="focus" attribute.

General Syntax

Try it now

Source Code

Try it now

Note:Popover is closed by outside click event whenever data-trigger="focus" attribute is used.

Online Test / Quiz