Popover- jQuery CSS Bootstrap Popover

Twitter Bootstrap css made it easy to create popover and tooltips in simple steps. You can display both popover and tooltips in 4 directions left, right, top and bottom. But don't forget to include bootstrap.css and bootstrap.js file in your page. Click here to learn detail about bootstrap and download the required files.

HTML Code:

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

Javascript Code:

<script type="text/javascript"> 
  $(document).ready(function() { 
  $('[data-toggle="tooltip"]').tooltip(); 
  $('[data-toggle="popover"]').popover(); 
}); 
</script>

Output:

Click to toggle popover

Set Popover Direction

You can set data-placement attribute as left, right, top, bottom to display Popover in different direction. if you didn't set dataplacement then the default will be top.

Javascript Code:

<script type="text/javascript"> 
  $(document).ready(function() { 
  $('[data-toggle="tooltip"]').tooltip(); 
  $('[data-toggle="popover"]').popover(); 
}); 
</script>

HTML Code to Display Popover on Left:

<button type="button" class="btn btn-sm btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button>

Output

Tooltip on left

HTML Code to Display Popover on Right:

<button type="button" class="btn btn-sm btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Output

Tooltip on right

HTML Code to Display Popover on Bottom:

<button type="button" class="btn btn-sm btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button>

Output

Tooltip on bottom

Popover hide on click outside

jQuery Code

<script type="text/javascript">
$(document).ready(function() {
$('#popoverId').popover({
html: true,
title: 'Popover Title <a class="close" href="#");">&times;</a>',
content: '<div class="msg">Your Text Here</div>',
});
$('#popoverId').click(function (e) {
e.stopPropagation();
});
$(document).click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('#popoverId').popover('hide');
}
});
});
</script>

HTML Code

<button id="popoverId" class="popoverThis btn btn-large btn-danger">
Click Me!</button>

Output (Click Out side to close popover)

Click Me!

Options

Name	Type	Default	Description
data-animation	boolean	true	apply a CSS fade transition to the Popover
data-html	boolean	false	Use HTML tag inside the Popover. If true you can use HTML tags.
data-placement	string | function	top	You can use top, bottom, left, right, auto to position the tool tip.  auto will dynamically display the Popover. For example, if placement is "auto left", the Popover will display to the left when possible, otherwise it will display right.
data-selector	string	false	If a selector is provided, Popover objects will be delegated to the specified targets.
data-title	string | function		default title value if title tag isn't present.
data-content	string		Value to be displayed in the popover.
data-trigger	string	'hover focus'	how Popover is triggered - click, hover, focus, manual. You may pass multiple triggers; separate them with a space.
delay	number | object	0	delay showing and hiding the Popover in miliseconds. Object structure is: delay: { show: 500, hide: 100 }
container	string | false	false	Appends the Popover to a specific element. Example: container: 'body'