Bootstrap 4 - Popovers

Tooltip and popover are two similar components provided by Bootstrap. 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?

To implement a popover, you must use the data-toggle = "popover" attribute with any HTML element. Also, you have to use the title attribute and the data-content attribute to specify the header text and the text that needs to be displayed within the body of your popover.

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

Here 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, and 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:

OptionDescriptionDefault Value
animationThis option is used to add fade-in and fade-out effects to the popup.true
containerThis option specifies the HTML element name within which popover markup must be created dynamically to avoid overflow.false
contentThis option accepts the content to be added to the popover if the data-content attribute is not present in the HTML.
delayThis option specifies the time in milliseconds for the duration of the animation.0
htmlThis option allows the use of HTML code in the popover.true
placementThis option is for defining the popover position. The options are: up, right, down, and left.top
selector
templateThis option defines an HTML template for a popover message.
  • The title text will be included inside the div tag containing the 'popover-header' class.
  • The main content text will be included inside the div tag containing the 'popover-body' class.
<div class="popover" role="tooltip">
  <div class="arrow"></div>
  <h3 class="popover-header"></h3>
  <div class="popover-body"></div>
</div>'
titleThis option accepts the title to be added to the popover if the title attribute is not present in the HTML.Text or HTML
triggerThis option accepts multiple trigger events like hover, focus, and manually used to trigger the popover.'hover focus'
offsetThe offset of the popover relative to its target. For more information, see the Popper.js implementation document.
fallbackPlacementThis option specifies under which position Popper will use the fallback. For more information, see the Popper.js implementation document.'flip'
boundaryOverflow constraint boundary of the popover. The options are viewport, window, and scrollParent. For more information, see the Popper.js implementation document.
sanitizeThis option enables or disables sanitization of the 'template', 'content', and 'title' options when activated.true
whiteListAn object that contains allowed attributes and tags.
sanitizeFnHere, you can use your own sanitize function.null
popperConfigThis option is used to modify the default Popper.js configuration of bootstrap.null

Scroll Back to Top