BS3 Tooltips - Part 2

簡介

這篇解說如何用 Javascript 直接建立 BS3 的 tooltip。用法很簡單，就如同在 jQuery 中建立一個元件的方式一樣，建立元件時，傳入的參數必須是一個 Javascript 的物件，物件中包含所有要設定的參數及其值，請參考文章下方的 Javascript 程式碼。

以下為各參數及其允許值，以下大多數的參數亦可以用 data-* 的自訂屬性在 HTML 程式碼中設定，只有少數幾個屬性，當其值為 Javascript 物件時，受限於 HTML5 對自訂屬性的限制，是不能在 data-* 中設定的。

animation

Boolean 值, 設定為 true 時，提示框顯示時有動畫效果，反之則無。

delay

允許值為一 Javascript 物件，如 {show: 500, hide:300} 設定顯示及取消時的歷時，單位為 ms。允許值亦可為一數值，為數值時，顯示及取消歷時都同樣設定為此數值。

html

Boolean 值，設定為 true 時，允許在 title 參數中置入 html 程式碼並顯示，反之則只能使用一般文字。

placement

值可為字串或函式。若為字串，允許值為 "top", "right", "bottom", "left" 及 "auto"，若為函式，則由函式運算後傳回代表位置的字串值。

selector

允許值為 CSS3 篩選器的字串值，用以委任 (delegate) 要顯示提示框的元件；這個屬性值只用在顯示提示框的元件為動態加入 DOM 文件中的時候才有意義。

title

依 html 屬性的設定，允許值為 html 字串或純文字。提示框的內容。如果在 HTML 程式碼中已設定 title 屬性的值，則優先以其設定值為提示框的內容，如果不曾設定，才會以此處的設定值做為提示框的內容。

trigger

允許值為字串，設定顯示提示框的條件。允許值為 "hover"（預設), "click", "focus" 及 "manual"。

container

允許值為 CSS3 的篩選字串。將提示框的 DOM 元件指派給特定的元件。使用這個屬性設定時，螢幕上是看不出任何變化的，必須打開「開發者工具」檢視元件 (element) 頁面才能看出有何不同，提示框的 DOM 元件會出現在 container 指定的內容中。我到目前還想不出這有什麼作用。

template

允許值為字串，提示框的 html 範本，預設為 '

'。程式設計師可以依需要修改範本內容。

viewport

允許值為一個 Javascript 物件。用來規範提示框顯示時的位置，這個屬性的使用時的行為模式比較複雜，最好寫個程式好好測一下。Javascript 物件中的屬性有二：

selector: 允許值為 CSS3 籂選器的字串值，限制提示框所顯示的範圍為篩選元件所佔據的空間；預設值為 body。
padding: 允許值只能為正整數值，單位為 px。設定提示框內容的偏移量，當 placement 為 "top" 及 "bottom" 時，提示框的內容向左偏移；當 placement 為 "left" 及 "right" 時，提示框的內容向下偏移。這樣，可以有限度的調整箭頭和提示框的相對位置。偏移量則由 viewport 中的 selector 屬性中篩選的元件作為基準。

範例

CSS

圖 1. Tooltip 範例

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px;
}
#demo {
    width: 400px;
    height: 400px;
    padding: 50px;
}
</style>

＃demo{} 將介面元件略向螢幕中心移動，以便顯示提示框。

HTML

<body>
    
        
    
</body>

在 HTML 程式碼中建立一個有提示框的按鈕，不論是用 HTML 建立或是用 Javascript 建立，data-toggle="tooltip" 這個屬性是一定要設定的。

Script

<script>
"use strict"
$(function(){
    $(document).ready(function(){
        var opts ={
            animation: true,
            delay: {
                show: 500,
                hide: 300
            },
            html: true,
            template: '
',
            title: "Here is a large tooltip",
            trigger: "click",
            placement: "bottom",
            viewport:{
                selector: "#demo", 
                padding: 0
            }
        };
        $('[data-toggle="tooltip"]').tooltip(opts);
    });
});
</script>

第 12 行，用 style 屬性變更了提示框箭頭和內容的底色和文字的顏色。這裡要特別注意，因為箭頭是用 border 做出來的，因此四個方向的箭頭只㤦用了 border 邊線的一邊；因此，當 placement 改變時，要相對應改變 border-*-color 的屬性名稱。

熊伯的外接硬碟

2016年8月7日星期日