Bootstrap 3.0 Popover Sample
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<br/>
<br/>
<a href="#" id="firstButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Working)</a>
<br/>
<br/>
<a href="#" id="secondButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Failing)</a>
JavaScript
$(function () {
$('#firstButton').popover({
container: "body",
html: true,
content: function () {
return '<div class="popover-message">' + $(this).data("message") + '</div>';
}
});
$('#secondButton').popover(); // <-- The first initializer does this, which causes the next one to fail on the next line.
$('#secondButton').popover({
container: "body",
html: true,
content: function () {
return '<div class="popover-message">' + $(this).data("message") + '</div>';
}
});
});