Bootstrap Popover

May 14th, 2020

Prerana Kasar

Bootstrap Popover

A bootstrap popover is an also a javascript function which is similar to the bootstrap tooltip, it is a popup box which is appeared when a user is clicked to an element. The attribute data-toggle with the value popover is used to create the popover.

Example: 1 Bootstrap Popover Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Media Objects Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  	</script>
</head>
<body>
	<div class="container">
		<h2>Bootstrap Popover Example</h2>
		<a href="#" data-toggle="popover" title="Popover Header" data-content="The content of popover">Click Here</a>
	</div>

	<script>
		$(document).ready(function(){
  		$('[data-toggle="popover"]').popover();   
		});
	</script>
</body>
</html>

On the above code the attribute data-toggle with value popover to create bootstrap popover and data-content to write content of the popover.

Bootstrap Popover Position

Bootstrap have data-placement attribute to change the position of the popover. The default position of popover is right side of the element. With data-placement attribute we set top, right, left, bottom position of element.

Example: 2 Bootstrap Popover Position Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Media Objects Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  	</script>
</head>
<body>
	<div class="container">
		<h2>Bootstrap Popover Example</h2>
		<ul class="list-inline">
			<li><a href="#" data-toggle="popover" data-placement="top" title="Popover Header" data-content="The content of popover">Click Here</a></li>
			<li><a href="#" data-toggle="popover" data-placement="bottom" title="Popover Header" data-content="The content of popover">Click Here</a></li>
			<li><a href="#" data-toggle="popover" data-placement="left" title="Popover Header" data-content="The content of popover">Click Here</a></li>
			<li><a href="#" data-toggle="popover" data-placement="right" title="Popover Header" data-content="The content of popover">Click Here</a></li>
		</ul>
	</div>

	<script>
		$(document).ready(function(){
  		$('[data-toggle="popover"]').popover();   
		});
</script>
</body>
</html>

On the above code the attribute data-placement is used to change the position of the popover. The default poition of popover is right.