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:

<a title="" rel='popover'>Default Popover</a>

Javascript Code:

<script type="text/javascript">
$(document).ready(function() {
$("[rel='popover']").popover({
placement : 'top', // top, bottom, left or right
title : 'This is my Title', 
html: 'true', 
content : '<div id="popOverBox">Your Text Here</div>'
});
});
</script>

Output:

Default Popover Click Me!

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() {
$("[rel='popover']").popover({
html: 'true', 
content : '<div id="popOverBox">Your Text Here</div>'
});
});
</script>

HTML Code to Display Popover on Left:

<a title='Left Popover'  rel='popover' data-placement='left' >Left Popover</a>

Output

Left Popover

HTML Code to Display Popover on Right:

<a title='Right Popover' rel='popover' data-placement='right'>Right Popover</a>

Output

Right Popover

HTML Code to Display Popover on Bottom:

<a title='Bottom Popover' rel='popover' data-placement='bottom'>
Bottom Popover</a>

Output

Bottom Popover

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 Example File Total Downloads: 1772
Comments
21 February
2014
gajanan
Hi...

how we can show pop up alternatively means when i click on another button only one popup and when i click another button previous popup should be close.

Thanks in adavance
09 January
2014
Oliver
Hi again,

It works, thanks to Arup Senapati (admin) to helped me to find the right solution…

Every button has the same id as "popoverId", please create unique id for all buttons and call those in your jQuery.. you can add numbers 123.. to each buttons.

Thx again and good job guys ;-) !
08 January
2014
Oliver
Thank's a lot for this work... but i would like to know if it is possible to use it into a foreach ? it only works for the first one but not for the others...

Is there an option or something like this to add ?

thx a lot Again :-)

Here is my work : www.poivre-et-sel.be/pes/pes
23 November
2013
Ram
Thank's a lot, i was searching 1 hour for it. it's Very Useful.
comments powered by Disqus