Question

Bootstrap里怎么动态创建一个popover

Answer 1

Bootstrap里如何动态创建一个popover

一种简单的方法就是自己写 popover 的 html，并且在需要显示 popover 的地方控制内容变化。
$("#your-button").popover({
html: true,
content: '<div id="content">...<哗卜/div>'
})
.click(function() {
$("#content").text('YOUR CONTENT');
});

P.S. 最新的 bootstrap 3 的 popover(options) 初始化参数里提供了拆雹修改默认 popover template html 的选项，我没有实际用过不确定有没有坑，看起来会比上面的方法更加优雅。

js：
<script src='js/jquery-1.9.0.min.js' type="text/javascript"></script>
<script src='旅芦帆js/bootstrap.min.js' type="text/javascript"></script>
<link href='css/bootstrap.min.css' rel="stylesheet">
<link href='css/bootstrap.add.css' rel="stylesheet">

window.addEventListener("hashchange", function() { scrollBy(0, -145) })
$('#profil').popover({placement : 'bottom',html : 'true', trigger : 'hover'})

html：
<button class="btn btn-small btn-bpf-inverse" type="button" id="profil" data-original-title="Profil" href="#" data-toggle="popover" title="Détail du profil"
data-content="
<p>Profil métier :<br><span class='label label-success'>Gestion local des services</span></p>
<p>Type de Service :<br><span class='label label-success'>Services aux véhicules</span></p>
<p>Pays :<br><span class='label label-success'>Italy</span></p>
<p>Marque :<br><span class='label label-success'>Citroën</span></p>
">
<i class="icon-user"></i> Profil
</button>