The following code shows how to click to toggle popover.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'
src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){<!-- www .j av a2 s . co m-->
$('[data-toggle="popover"]').popover({
html: true,
content: function() {
var content = $(this).data('content');
try { content = $(content).html() } catch(e) {/* Ignore */}
return content;
}
});
});//]]>
</script>
</head>
<body>
<h3>
Using <em>data-content</em> attribute as text:
</h3>
<a data-toggle="popover"
data-title="Popover Title"
data-content="Text from data-content attribute!"
class="btn btn-primary btn-large" href="#"
data-original-title="A Title">Click to toggle popover</a>
<hr/>
<h3>
Using <em>data-content</em> attribute as CSS selector:
</h3>
<a data-toggle="popover" data-title="Popover Title"
data-content="#countdown-popup" class="btn btn-default btn-large"
href="#" data-original-title="A Title">Click to toggle popover</a>
<div id="countdown-popup" class="hide">
Text from
<code>#countdown-popup</code>
element!
</div>
</body>
</html>