BS3 Tooltips - Part 1
簡介
在 HTML 中本來就已經具有 tooltip (提示框）的功能，BS3 的 tooltip 將其外觀樣式做了更動，將 tooltip 的底色改成黑色，文字改成白色，提示框還具有一個指向元件的箭頭；同時也相當程度的擴充了 tooltip 的功能，讓其運用可以更為廣泛。在同一個頁面中，可以同時使用 HTML 的 tooltip 和 BS3 的 tooltip ，彼此間不會相互干擾。但是為了執行時的效率，BS3 的 tooltip 必須明確的使用 Javascript 將其啟動，如果沒有做這件事，則會使用 HTML 預設的 tooltip 樣式。
建立 BS3 的 tooltips 有二種方式，一種直接在 HTML 程式碼中使用 data-* 自訂屬性建立，然後在 Javascript 中啟動，另一種則是直接用 Javascript 建立並設定所有屬性值。基本上，用哪一種方式，純看個人喜好；但是如果要將 BS3 中的 tooltip 用到極致，用 Javascript 建立並設定會容易些。提示框的內容，預設都以 title 屬性值為其內容，這樣有個好處，如果程式有了問題，至少會用到 HTML 預設的 tooltip 來顯示。以下為一些比較基本的 data-* 自訂屬性，及其允許值：
- data-toggle
- data-toggle 的值在 tooltip 元件中一定得設定為 "tooltip"。
- data-placement
- 指定提示框要出現的位置。其值可以是 top（預設值）, right, bottom, left 及 auto，其中 auto 就是讓流覽器自行決定提示框顯示的位置。
- data-trigger
- 指定提示框顯示的方式，可以組合使用，組合使用時，在字串值中用空白將各條件分隔。允許值如下：
- hover
- 這是預設值，當游標移到元件上方時顯示提示框，移出時取消提示框。
- focus
- 當元件取得焦點時顯示提示框，失去焦點時取消提示框。當點按元件時，元件會自動取得焦點，也會顯示提示框，在元件外部點按時，元件會使去焦點，同時取消提示框。
- click
- 點按元件時，顯示提示框，再次點按元件時取消提示框。
- manual
- 這個值實際上指的是透過 Javascript 程式來控制提示框的顯示和取消。
以下為 BS3 V3.3.6 的 bootstrap.css 樣式表中有關 .tooltip 的樣式設定。其中 .tooltip.top-left .tooltip-arrow {}, .tooltip.top-right .tooltip-arrow{} 及 .tooltip.bottom-left .tooltip-arrow {}, .tooltip.bottom-right .tooltip-arrow{} 的幾個樣式設定，在原本的 bootstrap.js 中並不支援，得去 https://github.com/andresgutgon/bootstrap-tooltip-extension 下載擴充套件才能使用。這個套件只是單純的增加了四個提示框箭頭的位置，是否真的需要使用，純粹是依照個人觀點和需求了。
.tooltip {
position: absolute;
z-index: 1070;
display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
filter: alpha(opacity=0);
opacity: 0;
line-break: auto;
}
.tooltip.in {
filter: alpha(opacity=90);
opacity: .9;
}
.tooltip.top {
padding: 5px 0;
margin-top: -3px;
}
.tooltip.right {
padding: 0 5px;
margin-left: 3px;
}
.tooltip.bottom {
padding: 5px 0;
margin-top: 3px;
}
.tooltip.left {
padding: 0 5px;
margin-left: -3px;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
background-color: #000;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
right: 5px;
bottom: 0;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
bottom: 0;
left: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
right: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
left: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
範例
範例中建立四個清單元件，取消其前導圖像，用以展示提示框出現時的不同位置。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
}
#demo {
padding: 50px;
}
ul {
list-style: none;
}
</style>
#demo{} 將所有元件移到偏螢幕中間，好讓各提示框有空間顯示。 ul{} 取消列示的圖像。另建立一個按鈕群組，展示三個提示框顯示的不同條件。
HTML
<body>
</body>
第 1~8 行建立一個沒有前導圖像的清單元件，四個元件各設定四個不同提示框顯示的位置，當游標移到各元件上方時，則會在設定的位置顯示提示框。
第 9~13 行建立一個按鈕群組，並以 data-trigger 自訂屬性值設定不同提示框出現的條件。
Script
<script>
"use strict"
$(function(){
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
});
</script>
Javascript 程式中，利用搜尋 data-toggle="tooltip" 條件啟動所有的 tooltips。
沒有留言:
張貼留言