Bootstrap 4 Popover
Bootstrap 4 Popover
Popover
A popover is similar to the tooltip. The only difference between tooltip and Popover is that in the tooltip, the popup box appears when you move the cursor over the element or link. In the Popover, the popup box appears when you click on the element. The Popover also contains more content than the tooltip.
Steps for creating Popover
- Add the data-toggle=”popover” attribute to the <a> element.
- Add the title attribute to the <a> to add the title or header in the popup box.
- Add the data-content attribute to the <a>, which is used to add content such as paragraph, sentence, etc. to the popup box.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Popover Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Popover</h3>
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Output
Positioning Popovers – The default position of the popover is the right side of the element. You can set the position of the popover on your own to the left, right, top, and bottom with the help of data-placement attribute.
- To set the position of the popover to the left, add the data-placement=”left” attribute.
- To set the position of the popover to the right, add the data-placement=”right” attribute.
- To set the position of the popover at the top, add the data-placement=”top” attribute.
- To set the position of the popover at the bottom, add the data-placement=”bottom” attribute.
Note: Sometimes the popover will not work properly because of small space. If you set the data-placement value “top” and there is no proper space for the popover on the top of the element then the popover will appear on the bottom of the element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Popover Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Popover</h3>
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Left</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Right</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Output
Closing Popover – The popover disappears when you click on the element. Add the data-trigger=”focus” attribute, this feature allows you to click anywhere on the screen to make the popover disappear and also enhance the user experience.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Popover Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Popover</h3>
<p> Click anywhere on the screen to make the <strong>popover</strong> disappear</p>
<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>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Output
Note: You can also make you popover visible when you move cursor over the element. For this, add the data-trigger=”hover” attribute to the <a> element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Popover Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Popover</h3>
<a href="#" title="Header" data-toggle="popover" data-content="Some content">Click Me</a><br>
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Output