<script type="text/javascript"> $(function () { $('[data-toggle="tooltip"]').tooltip() }) $(function () { $('[data-toggle="popover"]').popover() }) $(document).ready(function () { //自定义popover显示的内容 $('#mypopover').popover({ html : true, title: function() { return $("#popover-head").html(); }, content: function() { return $("#popover-content").html(); } }); }); </script>
<div class="row">
<div class="col-xs-12 text-center">
<button id="mypopover" type="button" class="btn btn-default" data-container="body" data-placement="bottom" >Popover on 右侧
</button>
<div id="popover-head" class="hide">some title</div>
<div id="popover-content" class="hide">
<form>
there is form
</form>
</div>
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>
</div>
</div>