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&eacute;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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值