Menu
I am trying to get separate the bootstrap popover content from the html attributes like you can do with other components, but I can't 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>
793
You have simple anchor and some div which should not 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 install popover on it with 2 options: first 'html' - allows to display html instead of simple text, second specifies content, which obtained 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 issues of your code - you perform $('[data-toggle="popover"]') which will select tags with data-toggle that equals to "popover"), but you have no such tags. If you want to initalize popovers this way you should declare anchor like this:
<a href="#" data-toggle="popover" class="popover-toggle" title="Popover Header">Toggle popover</a>
But in your case you have only one link with one custom popover, so it is more logically select it by id.
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
