This tutorial explains all about Bootstrap 4 Popovers. Learn to create Bootstrap Popover, Closing Popover, usage, etc:
In this tutorial, you will learn what a Bootstrap 4 popover is, how to create a Bootstrap popover, popover positions, Bootstrap hover popovers, frequently asked questions, etc.
Please note that we have used Bootstrap version 4 in all examples.
=> Check ALL Bootstrap Tutorials Here
Let’s begin!
Table of Contents:
What Is A Bootstrap 4 Popover
A Bootstrap popover is a small popup box that appears when the user clicks on an element like a button or a link. They are similar to Bootstrap tooltips. The major difference between the two components is that a popover only appears when a user clicks the element while a tooltip appears when a user places the cursor over an element (hover).
The following table summarizes the attributes that we have used in this tutorial.
| Class | Usage |
|---|---|
| The data-toggle attribute | This attribute is used to activate a popover. |
| The title attribute | This attribute is used to display the header text of the popover. |
| The data-content attribute | This attribute is used to display the body text of the popover. |
| The data-placement attribute | This attribute is used to set the position of the popover. |
| The data-trigger="focus" attribute | This attribute is used to close the popover when clicking outside the element. |
How To Create Bootstrap Popover
Add the data-toggle attribute, the title attribute, and the data-content attribute to an element like a link or a button to create a popover.
It consists of two main parts called header (title) and body (content). The value of the title attribute should be the text that you want to display as the header of the popover and the value of the data-content attribute should be the text that you want to display as the body.
Important: You need to add the 3rd party library called Popper.js in your project as it is required to work with popovers properly (for positioning).
The below programming code shows a basic example. You can try this example by running the below programming code:
Important: Popovers must be initialized with jQuery as shown in the below example.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<a href="#" data-toggle="pop-over" title="title" data-content="body">Basic Popover</a><br>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="pop-over"]').popover();
});
</script>
</body>
</html>
Note: Click the above link to see the popover.
The below screenshots show the browser output of the above programming code:
Before clicking the link:
After clicking the link:
Popovers With HTML
You can also use HTML inside the popover.
The below programming code shows an example. You can try this example by running the below programming code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<button type="button" class="btn btn-primary mt-5" data-toggle="pop-over" data-html="true"
title="<b>This</b> <u>is</u> <i>HTML.</i>" data-content="<b>This</b> <u>is also</u> <i>HTML.</i>">
My Text
</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="pop-over"]').popover();
});
</script>
</body>
</html>
The below screenshots show the browser output of the above programming code:
Before clicking the button:
After clicking the button:
Popover Positions
There are four popover positions as shown in the below list. These positions specify the direction in which it appears. Add the data-placement attribute to set the position.
- Top: Appears on top of the element.
- Bottom: Appears on the bottom of the element.
- Left: Appears on the left of the element.
- Right: Appears on the right of the element. This is the default position.
The below programming code shows a few examples. You can try these examples by running the below programming code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<button class="btn btn-danger mt-5" data-toggle="pop-over" data-placement="top" title="Header" data-content="Content">Top</button>
<button class="btn btn-warning mt-5" data-toggle="pop-over" data-placement="bottom" title="Header" data-content="Content">Bottom</button>
<button class="btn btn-success mt-5" data-toggle="pop-over" data-placement="left" title="Header" data-content="Content">Left</button>
<button class="btn btn-info mt-5" data-toggle="pop-over" data-placement="right" title="Header" data-content="Content">Right</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="pop-over"]').popover();
});
</script>
</body>
</html>
The below screenshot shows the browser output of the above programming code:
Note – Click the above buttons to see the four popover positions: top, bottom, left, and right. You need to keep enough space around the elements as shown in the above screenshot. Otherwise, the positions may change.
Closing A Popover
If you want to close a popover, you need to click back the element (button or link). By default, clicking outside the element will not close it. However, this is possible by adding the data-trigger=”focus” attribute.
The below programming code shows an example. You can try this example by running the below programming code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<a href="#" data-toggle="pop-over" title="title" data-trigger="focus" data-content="body">Click Me!</a><br>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="pop-over"]').popover();
});
</script>
</body>
</html>
The below screenshot shows the browser output of the above programming code:
Note: You can add hover as the value of the data-trigger attribute If you want to display the popover when you place the cursor over the element. This is called Bootstrap hover popover.
Usage
#1) Options
There are two ways to pass options.
- Via data attributes
- Via JavaScript
The following table shows the available options:
| Name | Type | Default | Description |
|---|---|---|---|
| animation | boolean | true | Specify whether to apply a CSS fade transition when opening and closing the popover. true - apply a CSS fade transition false - do not apply a CSS fade transition |
| container | string or element or false | false | Append the popover to a specific element. Example: container: 'body' |
| content | string or element or function | '' | The default value of the content if the data-content attribute is not present. |
| delay | number or object | 0 | The delay in ms, it will take to open and close the popover. It does not apply to the manual trigger type. |
| html | boolean | false | Specify whether to insert HTML in the popover true - insert HTML false - do not insert HTML |
| placement | string or function | 'right' | The popover position. 1. auto - dynamically reorient a popover 2. top - popover appears on the top 3. bottom - popover appears on the bottom 4. left - popover appears on the left 5. right - popover appears on the right |
| selector | string or false | false | Add the popover to specified targets. |
| template | string | (the basic structure) | The basic HTML structure to use when creating the popover. |
| title | string or element or function | '' | The default value of the title if the title attribute is not present. |
| trigger | string | 'click' | How popover is triggered. 1. click - trigger a popover using a click 2. hover - trigger a popover on hover 3. focus - trigger a popover when it gets focus 4. manual - trigger a popover manually |
| offset | number or string | 0 | The offset of the popover relative to the target. |
| fallbackPlacement | string or array | 'flip' | Specify the fallback position. |
| boundary | string or element | 'scrollParent' | Specify the boundary of the popover. |
| sanitize | boolean | 1 | Enable or disable the sanitization. |
| whiteList | object | Default value | The object that contains allowed attributes and tags. |
| sanitizeFn | null or function | null | Provide your own sanitize function. |
| popperConfig | null or object | null | Change the default Popper.js configuration. |
#2) Methods
The following table shows the available methods:
| Method | Description | Example |
|---|---|---|
| $().popover(options) | Initialize the popover with an option. | - |
| .popover('show') | Show the popover. | $('#element').popover('show') |
| .popover('hide') | Hide the popover. | $('#element').popover('hide') |
| .popover('toggle') | Toggle the popover. | $('#element').popover('toggle') |
| .popover('dispose') | Hide and destroy the popover. | $('#element').popover('dispose') |
| .popover('enable') | Enable the popover. | $('#element').popover('enable') |
| .popover('disable') | Disable the popover. | $('#element').popover('disable') |
| .popover('toggleEnabled') | Toggle the ability of popover (to be shown or hidden). | $('#element').popover('toggleEnabled') |
| .popover('update') | Update the position of the popover. | $('#element').popover('update') |
#3) Events
The following table shows the available events:
| Event | Description | Example |
|---|---|---|
| show.bs.popover | This event is fired when the popover is about to be shown to the user. | $('#myPopover').on('show.bs.popover', function () { // write your code here }) |
| shown.bs.popover | This event is fired when the popover is fully visible to the user (after the completion of CSS transitions) | $('#myPopover').on('shown.bs.popover', function () { // write your code here }) |
| hide.bs.popover | This event is fired when the popover is about to be hidden from the user. | $('#myPopover').on('hide.bs.popover', function () { // write your code here }) |
| hidden.bs.popover | This event is fired when the popover is fully hidden from the user (after the completion of CSS transitions). | $('#myPopover').on('hidden.bs.popover', function () { // write your code here }) |
| inserted.bs.popover | This event is fired after occurring the show.bs.popover event when the popover template has been added to the DOM. | $('#myPopover').on('inserted.bs.popover', function () { // write your code here }) |
Frequently Asked Questions
In this section, we will discuss some of the FAQs. These questions will help you to prepare for your examinations and interviews confidently.
Q #1) What is Bootstrap popover?
Answer: It is a popup box that appears when the user clicks on an element.
Q #2) How do I use popovers in Bootstrap?
Answer: You use the data-toggle attribute, the title attribute, and the data-content attribute to create a popover.
Q #3) How do I change my popover position?
Answer: You can use the data-placement attribute with one of the position values (top, right, bottom, and left) to change the position.
Q #4) How do I close a popover?
Answer: By clicking back the element. If you have used the data-trigger=”focus” attribute, then you can click outside the element to close.
Q #5) How can I change the Bootstrap popover width and height?
Answer: You can use CSS classes to change the width and height.
Q #6) What is the difference between a tooltip and a popover?
Answer: The difference between the two components is that a tooltip appears when the user places the cursor over an element (hover) while a popover appears when the user clicks the element.
Conclusion
A Bootstrap popover is a small popup box that appears when the user clicks an element. You can change the position of the popover as there are four available positions. You can also add popovers with HTML.
Hope you have enjoyed this tutorial. Hope to see you soon with our next tutorial.
=> Read Through The Easy Bootstrap Training Series