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.


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



The following jQuery code shows how to trigger a popover with specified options:


    delay:{ "show": 600, "hide": 100 },
    title:"<strong>This title is from JavaScript.</strong> It is defined as a popover option.",

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
template This 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>
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

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram