iOS
. Popper.js
for positioning. You must include popper.min.js
before bootstrap.js
or use bootstrap.bundle.min.js
/ bootstrap.bundle.js
which contains Popper.js
in order for popovers to work!$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
To create a popover, add the data-toggle="popover"
attribute to an element. Use the title
attribute to specify the header text of the popover, and use the data-content
attribute to specify the text that should be displayed inside the popover's body
<button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
Click Here!
</button>
Use data-placement
attribute to set the position of the popover on top
, bottom
, left
or the right
side of the element.
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
Popover on top
</button>
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="right" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
Popover on right
</button>
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
Popover on bottom
</button>
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="left" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
Popover on left
</button>
Use the focus
trigger to dismiss popovers on the user’s next click of a different element than the toggle element.
<a href="#" class="btn btn-primary" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
Click me
</a>
If you want the popover to be displayed when you move the mouse pointer over the element, use the data-trigger
attribute with a value of "hover"
<a href="#" class="btn btn-primary" title="Header" data-toggle="popover" data-trigger="hover" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry.">Hover over me</a>