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.

Note:Bootstrap popover is similar to tooltip but popover displays when the user clicks on the element.

Steps To Create Popover

Follow the given steps to create popover.

Step1: Add data-toggle="popover" attribute to an element.
Step2: Add title attribute to show the header text information of the popover.
Step3: Add data-content attribute to show the the text information that will be exist inside the popover's body.

Step4: 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="Web Development" data-content="Web development with the help of css framework.">Show Popover</a>

Try It Now

Source Code

	
		<div class="container my-2">
    <a href="#" data-toggle="popover" title="Web Development" data-content="Web development with the help of CSS framework.">Show Popover</a> 
</div>

Try it yourself

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

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

Source Code

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

Try it yourself

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

		<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>

Source Code

	
		<div class="container my-2">
   <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> 
</div>

Try it yourself

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

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS