Bootstrap popover with html content
I am trying to split the contents of the bootstrap popover with html attributes, as you can do with other components, but I cannot get it to work ...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<p>Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the popover() method.</p>
<div class="popover" >
<a href="#" class="popover-toggle" title="Popover Header" >Toggle popover</a>
<div class="popover-content">
Here I am
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
source to share
You have a simple anchor and some div that shouldn't be displayed.
<a href="#" id="tglr" class="popover-toggle" title="Popover Header">Toggle popover</a>
<div id="customdiv" style="display: none">
Here <b>I</b> am
</div>
In JS, we get our anchor (by id) and set two options on it: the first 'html' - allows displaying html instead of plain text, the second indicates the content received from our div:
$(document).ready(function(){
$('#tglr').popover({
html : true,
content: function() {
return $('#customdiv').html();
}
});
});
Here is your example https://jsfiddle.net/DTcHh/8529/
One of the problems with your code is that you are doing $ ('[data-toggle = "popover"]'), which will select tags with a data toggle equal to "popover"), but you don't have any tags. If you want to initialize popovers this way, you must declare the anchor like this:
<a href="#" data-toggle="popover" class="popover-toggle" title="Popover Header">Toggle popover</a>
But in your case, you only have one link with one custom popover, so it is logical to select it by id.
source to share