Tooltip and Popover are two similar components provided by Bootstrap4. When you click on the HTML element, a popup box will appear, where you can see some additional information related to that element, called a popover. The difference between a popover and a tooltip is that a popover can contain more information than a tooltip.
How to Create Popover Using Bootstrap 4?
To implement a popover, you must use the data-toggle = "popover" attribute with any HTML element. Also, you must use the title attribute to specify the header text and the data-content attribute for the main text.
Example:
<a href="#" data-toggle="popover" title="Popover Title Text" data-content="Information that is to be displayed within the popover." data-placement="top">Popover Toggle</a>To set a specific popover position, you can use the data-placement attribute. By default, it will appear on the right side of the HTML element.
jQuery Script to Call and Enable Popover
To use Popover, it is necessary that it must be initialized with jQuery. The following jQuery script triggers Popover without specifying any argument options:
Example:
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>The following jQuery code shows how to trigger a popover with specified options:
Example:
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
delay:{ "show": 600, "hide": 100 },
title:"<strong>This title is from JavaScript.</strong> It is defined as a popover option.",
html:true,
});
});
</script>In the above code, delay, title, and html options have been used. If the HTML element title is not defined, the defined title will be used. The defined title option includes HTML tags that are allowed in the Popover if the option 'html' is set as true.
Dismiss a Popover
The Popover has no close button to close it; hence, if the user clicks the element again, it will be closed. Also, if the user clicks outside the element, it can be turned off using the data-trigger="focus" attribute within the HTML element.
Popover Options
The following table shows all the options that can be used with the Popover:
| Option | Description | Default Value |
|---|---|---|
| animation | This option is used to add fade-in and fade-out effects to the popup. | true |
| container | This option specifies the HTML element name within which popover markup must be created dynamically to avoid overflow. | false |
| content | This option accepts the content to be added to the Popover if the data-content attribute is not present in the HTML. | |
| delay | This option specifies the time in milliseconds for the duration of the animation. | 0 |
| html | This option allows the use of HTML code in the Popover. | true |
| placement | This option is for defining the popover position. The options are: up, right, down, and left. | top |
| selector | ||
| template | This option defines an HTML template for a popover message.
|
|
| title | This option accepts the title to be added to the Popover if the title attribute is not present in the HTML. | Text or HTML |
| trigger | This option accepts multiple trigger events like hover, focus, and manually used to trigger the Popover. | 'hover focus' |
| offset | The offset of the Popover relative to its target. For more information, see the Popper.js implementation document. | |
| fallbackPlacement | This option specifies under which position Popper will use the fallback. For more information, see the Popper.js implementation document. | 'flip' |
| boundary | Overflow constraint boundary of the Popover. The options are viewport, window, and scrollParent. For more information, see the Popper.js implementation document. | |
| sanitize | This option enables or disables sanitization of the 'template', 'content', and 'title' options when activated. | true |
| whiteList | An object that contains allowed attributes and tags. | |
| sanitizeFn | Here, you can use your own sanitize function. | null |
| popperConfig | This option is used to modify the default Popper.js configuration ofBootstrapp. | null |