BS3 Popovers
簡介
BS3 的 popover 是一個擴充自 BS3 tooltip 的介面元件，在使用上和 BS3 的 tooltip 非常類示。popover 具有和 tooltip 不同的預設底色和字體的顏色；擴充的部份是將顯示的資訊內容分成「標題」和「內容」兩部份，以顯示更多的資訊；另外，popover 的箭頭也會依顯示位置和介面元件的相對位置做調整。tooltip 比較偏向「提示」介面元件的作用或功能，而 popover 比較偏向「解釋」介面元件具有的額外資訊和使用的方式。標題的內容來自 HTML 標記中 title 的屬性值（此為預設），或以 data-title 的自訂屬性值替代，（如果同時設定 title 屬性的值，則優先以 title 的值做為 popover 標題）。自訂屬性 data-content 的值則做為 popover 的內容。其於各自訂屬性所代表的意義和用法都和 tooltip 相同。和 tooltip 相同，因為執行效率的考量，popover 也必須透過 Javascript 程式來啟動。
以下為一些 popover 比較基本的 data-* 自訂屬性，及其允許值：
- data-toggle
- data-toggle 的值在 popover 元件中一定得設定為 "popover"。
- data-placement
- 指定 popover 要出現的位置。其值可以是 top（預設值）, right, bottom, left 及 auto，其中 auto 就是讓流覽器自行決定 popover 顯示的位置。
- data-trigger
- 指定 popover 顯示的方式，可以組合使用，組合使用時，在字串值中用空白字元將各條件分隔。允許值如下：
- hover
- 這是預設值，當游標移到元件上方時顯示 popover，移出時取消 popover。
- focus
- 當元件取得焦點時顯示 popover，失去焦點時取消 popover。當點按元件時，元件會自動取得焦點，也會顯 popover，在元件外部點按時，元件會使去焦點，同時取消 popover。
- click
- 點按元件時，顯示 popover，再次點按元件時取消 popover。
- manual
- 這個值實際上指的是透過 Javascript 程式來控制 popover 的顯示和取消。
以下為 BS3 V3.3.6 中 bootstrsp.css 樣式表中與 .popover 相關的樣式類別定義。
.popover.top {
margin-top: -10px;
}
.popover.right {
margin-left: 10px;
}
.popover.bottom {
margin-top: 10px;
}
.popover.left {
margin-left: -10px;
}
.popover-title {
padding: 8px 14px;
margin: 0;
font-size: 14px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 9px 14px;
}
.popover > .arrow,
.popover > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover > .arrow {
border-width: 11px;
}
.popover > .arrow:after {
content: "";
border-width: 10px;
}
.popover.top > .arrow {
bottom: -11px;
left: 50%;
margin-left: -11px;
border-top-color: #999;
border-top-color: rgba(0, 0, 0, .25);
border-bottom-width: 0;
}
.popover.top > .arrow:after {
bottom: 1px;
margin-left: -10px;
content: " ";
border-top-color: #fff;
border-bottom-width: 0;
}
.popover.right > .arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-right-color: #999;
border-right-color: rgba(0, 0, 0, .25);
border-left-width: 0;
}
.popover.right > .arrow:after {
bottom: -10px;
left: 1px;
content: " ";
border-right-color: #fff;
border-left-width: 0;
}
.popover.bottom > .arrow {
top: -11px;
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999;
border-bottom-color: rgba(0, 0, 0, .25);
}
.popover.bottom > .arrow:after {
top: 1px;
margin-left: -10px;
content: " ";
border-top-width: 0;
border-bottom-color: #fff;
}
.popover.left > .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999;
border-left-color: rgba(0, 0, 0, .25);
}
.popover.left > .arrow:after {
right: 1px;
bottom: -10px;
content: " ";
border-right-width: 0;
border-left-color: #fff;
}
範例
範例中建立了四個按鈕，按鈕標示 popover 出現的的位置。點按按鈕時出現 popover，再次點按則取消 popover。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 900px;
padding: 20px;
}
#demo {
width:100%;
padding: 200px;
}
</style>
#demo{} 樣式設定將介面元件移至螢幕中央，以便 popover 有足夠的空間顯示。
HTML
<body>
</body>
HTML 中建立四個按鈕，各在不同的方位顯示 popover。程式碼相當簡單，就不多做解釋了。
Script
<script>
$(function(){
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
});
</script>
第 4 行透過 [data-toggle="popover"] 篩選條件啟動 popover。
沒有留言:
張貼留言