前面的話
表面上看，彈出框其實就是一種特殊的提示框，只是多了一個標題而已。但實際上，還是有不同之處的。本文將詳細介紹Bootstrap彈出框
基本用法
在制作提示框（tooltip）時，可以使用<button>或者<a>標簽元素，而且通過 data- 屬性來聲明提示框的信息。而彈出框popover和提示框tooltip相比，就多了一個content內容，那么在此使用 data-content 來定義彈出框中的內容。同樣可以使用<button>或者<a>標簽來制作
于是最基本的用法如下
1、通過 title 屬性的值來定義標題(也可以使用自定義屬性 data-original-title 來設置標題)，title優先級高
2、通過data-content屬性來設置內容
3、設置data-toggle="popover"
4、使用如下js代碼進行觸發
$('[data-toggle="popover"]').popover();
<body style="margin-top:50px"> <button type="button" class="btn btn-danger" data-toggle="popover" title="標題" data-content="我是內容">點我彈出/隱藏彈出框</button> <script> $(function(){ $('[data-toggle="popover"]').popover(); }); </script>
屬性參數
在彈出框制作時，可以在HTML中定義下表所列的自定義屬性
[注意]data-palcement默認居右顯示，而不是居上顯示
<body style="margin-top:100px"> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="標題" data-content="上側" >上側</button> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="標題" data-content="下側" >下側</button> <button type="button" class="btn btn-default" data-toggle="popover" title="標題" data-content="無動畫" data-animation="false" >無動畫</button> <button type="button" class="btn btn-default" data-toggle="popover" title="標題" data-content="有動畫" >有動畫</button> <button type="button" class="btn btn-default" data-toggle="popover" title="標題" data-content="hover觸發" data-trigger="hover">hover觸發</button> <button type="button" class="btn btn-default" data-toggle="popover" title="標題" data-content="click觸發" data-trigger="click">click觸發</button> <button type="button" class="btn btn-default" data-toggle="popover" title="標題" data-content="不延遲">不延遲</button> <button type="button" class="btn btn-default" data-toggle="popover" title="標題" data-content="延遲500ms" data-delay="500">延遲500ms</button> <script> $(function(){ $('[data-toggle="popover"]').popover(); }); </script>
JS觸發
popover的JS用法與tooltip的用法一樣，支持使用options對象的方法來向popover()方法傳參
$(element).popover(options);
options對象里的參數包括amimation、html、placement、selector、original-title、title、trigger、delay、container、template
詳細情況移步至此
<body style="margin-top:50px"> <button type="button" class="btn btn-default" data-toggle="popover" >按鈕</button> <script> $(function(){ $('[data-toggle="popover"]').popover({ title:"我是標題", content:'我是內容' }); }); </script>
【關鍵字】
除了使用options對象，還可以使用關鍵字，'show'、'hide'、'toggle'、'destroy'
<body style="margin-top:100px;"> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="標題" data-content="內容" id="btn1">按鈕1</button> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="標題" data-content="內容" id="btn2">按鈕2</button> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="標題" data-content="內容" id="btn3">按鈕3</button> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="標題" data-content="內容" id="btn4">按鈕4</button> <script> $(function(){ $('#btn1').popover('show');//顯示彈出框 $('#btn2').popover('hide');//關閉彈出框 $('#btn3').popover('toggle');//反轉彈出框 $('#btn4').popover('destroy');//隱藏并銷毀彈出框 }); </script>
【事件】
該插件支持5種類型的事件訂閱
show.bs.tooltip show方法調用之后立即觸發該事件
shown.bs.tooltip 此事件在tooltip已經顯示出來（并且同時在 CSS 過渡效果完成）之后被觸發
hide.bs.tooltip hide方法調用之后立即觸發該事件。
hidden.bs.tooltip 此事件在tooltip被隱藏（并且同時在 CSS 過渡效果完成）之后被觸發
inserted.bs.tooltip 當tooltip模板加載到DOM中上時，在show.bs.tooltip觸發后，觸發該事件
<body style="margin-top:50px;"> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="標題" data-content="內容" id="btn">按鈕</button> <script> $(function(){ $('#btn').popover(); $("#btn").on("show.bs.popover",function(e){ $(this).html('關閉'); }).on("hide.bs.popover",function(e){ $(this).html('打開'); }) }); </script>
對比提示框
1、提示框 tooltip 的默認觸發事件是 hover 和 focus，而彈出框 popover 是 click
2、提示框 tooltip 只有一個內容(title)，而彈出框不僅可以設置標題（title）還可以設置內容(content)
3、提示框 tooltip 默認居上顯示，而彈出框 popover 默認居右顯示
4、顯示模板不同
提示框tooltip的模板：
<div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"></div> </div>
彈出框popover的模板：
<div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> </div>
文章列表
留言列表
