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 text information that will exist inside the popover's body.
Select the element and call the popover() method using jQuery.

Dropdown menu
      	
   $(document).ready(function(){
	 $('[data-toggle="popover"]').popover();
	});

General Syntax

      <a href="#" data-toggle="popover" title="Popover Title" data-content="Popover title description."> Popover </a>

Try it now

Source Code

          <a href="#" data-toggle="popover" title="Web Development" 
   data-content="Web development with the help of css framework.">Show Popover
</a>

Try it now

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

Bootstrap popover is similar to tooltip 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

      <a href="#" data-toggle="popover" title="Popover Title" data-content="Popover title description." data-placement="top" > Popover Position </a>

Try it now

Source Code

          <a href="#" title="Learn Web Development" data-toggle="popover" data-placement="top"
  data-content="To learn web development, you have to be familiar with the front-end & back-end development.">
  Top Popover
</a>

<a href="#" title="App Developmet" data-toggle="popover" data-placement="bottom" 
   data-content="There are various languages is used to develope a mobile app.">
  Bottom Popover
</a>

<a href="#" title="Graphics Design" data-toggle="popover" data-placement="left" 
   data-content="You have to familiar with graphics tool and techniques">
  Left Popover
</a>

<a href="#" title="Database Design" data-toggle="popover" data-placement="right" 
   data-content="You have to learn different database techniques.">Right Popover 
</a>

Try it now

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

Closing Of Bootstrap 4 Popover

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

General Syntax

      <a href="#" title="Dismissible popover" data-toggle="popover"  data-trigger="focus"   data-content="Closing popover">  Closing Popover
</a>

Try it now

Source Code

          <a href="#" title="Dismissible popover" data-toggle="popover" 
data-trigger="focus"   data-content="Click anywhere in the document to close this popover"> 
  Closing Popover
</a>

Try it now

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

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4