<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>