Bootstrap 4 Popovers, How To Learn Bootstrap 4 Popovers Tutorial

Bootstrap 4 Tutorial

Bootstrap 4 Popovers

Bootstrap provides a popover component that displays, small overlay content, similar to that found in iOS.

Popovers rely on the 3rd party library 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!

Popovers require the tooltip plugin as a dependency.

Include Javascript :

$(document).ready(function(){
	$('[data-toggle="popover"]').popover();   
});

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

Output :

Positioning Popovers

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>

Output :

Dismiss on next click

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>

Output :

Popover Hovers

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>

Output :

Bootstrap 4 Tutorial