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:



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



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



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



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)



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'


Download File

Total Downloads: 4704
Top