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>