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>
解决方案
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:
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:
