HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content
The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.
For a tutorial about Popovers, read our Bootstrap Popover Tutorial.
The data-toggle="popover"
activates the popover.
The title
attribute specifies the header text of the popover.
The data-content
attribute specifies the text that should be displayed inside
the popover's body.
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the
popover()
method.
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-placement="".
Name | Type | Default | Description | Try it |
---|---|---|---|---|
animation | boolean | true |
Specifies whether to add a CSS fade transition effect when opening and closing the popover
|
Try it |
container | string, or the boolean false | false | Appends the popover to a specific element. Example: container: 'body' |
Try it |
content | string | "" | Specifies the text inside the popover's body | Try it |
delay | number, or object | 0 | Specifies the number of milliseconds it will take to open and close the popover. To specify a delay for opening and another one for closing, use the object structure: delay: {show: 500, hide: 100} - which will take 500 ms to open the popover, but only 100 ms to close it |
Try it |
html | boolean | false | Specifies whether to accept HTML tags in the popover:
When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks |
Try it |
placement | string | "right" | Specifies the popover position. Possible values:
|
Try it |
selector | string, or the boolean false | false | Adds the popover to a specified selector | Try it |
template | string | Base HTML to use when creating the popover. The popover's title will be injected into the .popover-header. The popover's content will be injected into the .popover-body. .arrow will become the popover's arrow. The outermost wrapper element should have the .popover class. |
||
title | string | "" | Specifies the header text of the popover | Try it |
trigger | string | "click" | Specifies how the popover is triggered. Possible values:
|
Try it |
offset | number or a string | 0 | Offset of the popover relative to its target | |
fallbackPlacement | string or an aray | "flip" | Specifies which position Popper wil use on fallback | |
boundary | string or element | "scrollParent" | Overflow constraint boundary of the popover. Accepts the values "viewport", "window" or "scrollParent", or an HTML element |
The following table lists all available popover methods.
Method | Description | Try it |
---|---|---|
.popover(options) | Activates the popover with an option. See options above for valid values | Try it |
.popover("show") | Shows the popover | Try it |
.popover("hide") | Hides the popover | Try it |
.popover("toggle") | Toggles the popover | Try it |
.popover("dispose") | Hides and destroys the popover | Try it |
.popover("enable") | Enables the popover the ability to be shown. This is default | |
.popover("disable") | Removes the ability to show a popover. The popover can only be shown if it is re-enabled again | |
.popover("toggleEnabled") | Toggles the ability for the popover to be shown or hidden | |
.popover("update") | Updates the position of the popover |
The following table lists all available popover events.
Event | Description | Try it |
---|---|---|
show.bs.popover | Occurs when the popover is about to be shown | Try it |
shown.bs.popover | Occurs when the popover is fully shown (after CSS transitions have completed) | Try it |
hide.bs.popover | Occurs when the popover is about to be hidden | Try it |
hidden.bs.popover | Occurs when the popover is fully hidden (after CSS transitions have completed) | Try it |
inserted.bs.popover | Occurs after the show.bs.popover event when the popover template has been added to the DOM |