<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
  	
					

How to use

Things to know when using the popover plugin:

• Popovers rely on the 3rd party library Tether for positioning. You must include tether.min.js before bootstrap.js in order for popovers to work!
• Popovers require the tooltip plugin as a dependency.
• Popovers are opt-in for performance reasons, so you must initialize them yourself.
• To initialize popover you need to write the following code in your main js file

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

	<!-- Popover on top -->
	<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	  Popover on top
	</button>
	
	<!-- Popover on right -->
	<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	  Popover on right
	</button>
	
	<!-- Popover on bottom -->
	<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
	sagittis lacus vel augue laoreet rutrum faucibus.">
	  Popover on bottom
	</button>
	
	<!-- Popover on left -->
	<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	  Popover on left
	</button>

						

How to use

• Use data-placement="" attribute value top right bottom left for popover direction