【詳解】提示框（tooltip）的使用 - bootStrap4常用CSS筆記

tooltip (提示框) 是一個小小的彈窗，在滑鼠移動到元素上顯示，滑鼠移到元素外就消失。

屬性

常用的功能，可以通過以下屬性來設定：

data-toggle = "tooltip"	指明這是一個tooltip元件對象，其實可以省略
title = "這裡設定展示的文字"	提示框顯示的内容。
data-trigger = "{click \| hover \| focus \| manual}"	觸發提示框的方式： 1、click 【預設】單擊時顯示或關閉 2、hover 移上去顯示，移出去隐藏 3、focus 單擊時顯示，點選空白處時隐藏 4、manual 手動模式。需要調用js代碼觸發顯示或關閉提示框
data-html = "{false \| true}"	設定提示框内容是否支援HTML格式。預設值:false 當值為true時，title屬性值可以設定成html代碼。不過建議不要這麼設定，以防XSS攻擊
data-delay = "{數值}"	設定提示框延遲顯示。比如 data-delay = "1000" 時，提示框會在執行後1秒才顯示。預設值：0
data-animation = {true \| false}	是否動畫效果顯示提示框。預設值：false不顯示動畫效果。
data-container = {string \| false}	預設值false，當提示框用于按鈕組、表單或表格時，必須指定選項容器：\'body\'以避免不必要的副作用，（例如當觸發彈出視窗時元素變寬和/或失去圓角）。 data-container = "body"
data-placement = {left \| top \| right \| bottom \| auto}	設定提示框的顯示位置，支援多種設定，比如data-placement="auto left"時，提示窗盡可能顯示在左邊,在情況不允許的情況下它才顯示在右邊

簡單的提示框HTML代碼示例：

1 <a href="#" id="text" data-toggle="tooltip" title="這是一段顯示的文字" data-placement="right" data-trigger="hover">右邊顯示内容</a>
2 <script>
3 $(function(){
4     $(\'[data-toggle="tooltip"]\').tooltip(); // 也可以使用 $(\'#text\').tooltip(); 來啟用彈窗
5 });
6 </script>

支援HTML格式的提示框示例：

1 <a href="#" id="text" data-toggle="tooltip" title="<h1>bootStrap4學習之路</h1><p>漫漫長路，吾将上下求索之！</p>" data-html="true" data-placement="bottom" data-trigger="hover">顯示HTML樣式提示窗</a>
2 
3 <script>
4  $(function(){
5      $(\'[data-toggle="tooltip"]\').tooltip(); // 也可以使用 (\'#text\').tooltip(); 來啟用提示框
6  });
7 </script>

方法

還可以通過tooltip的option設定來實作更多功能，tooltip函數原型：

1 $obj.tooltip({
 2     title: \'\', // 提示框顯示的文本内容。如果同時設定了屬性的title，則優先屬性title設定
 3     placement: \'[left | top | right | bottom]\', // 等同于data-placement，級别優先于data-placement設定
 4     html: [true | false], // 等同于data-html，級别優先于data-html設定
 5     animation: [true | false], // 等同于data-animation，級别優先于data-animation設定
 6     
 7     delay: [數值], // 等同于data-delay，級别優先于data-delay設定
 8     // 也可以設定顯示延遲 或 隐藏延遲，如下：
 9     delay: {
10         show: [數值], // 顯示延遲
11         hide: [數值]  // 隐藏延遲
12     },
13 
14     trigger: \'[click | hover | focus | manual]\', // 等同于data-trigger，級别優先于data-trigger設定
15     
16     container: [string | false], // 等同于data-container,
17     
18     selector: [string | false], // 選擇器，設定某一對象下指定的元素為tooltip元件
19     
20     template: [string] // 預設值：\'<div class="tooltip" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>
                          //  預設下tooltip樣式是黑底白字，可以通過這個屬性自定義樣式。
21 });

使含有rel="tooltip"的連結變成tooltip元件：

1 <a href="#" rel="tooltip" title="這是一段提示文本">移上去</a>
 2 <script>
 3 $(function(){
 4     $(\'a[rel="tooltip"]\').tooltip({
 5         trigger: \'hover\',
 6         delay: 300,
 7         placement: \'bottom\'
 8     });
 9 });
10 </script>

selector 選擇器，設定某一對象下指定的元素為tooltip元件，示範代碼：

1 <div class="demo" data-trigger="hover">
 2   <a href="#" rel="tooltip" title="1111111111">移上去</a>&nbsp;&nbsp;
 3   <a href="#" rel="tooltip" title="2222222222">這裡移上去也會顯示</a>
 4 </div>
 5 <a href="#" rel="tooltip" title="0000000">這裡移上去不會顯示</a>
 6 <script>
 7 $(function(){
 8     $(\'.demo\').tooltip({
 9         selector: \'a[rel="tooltip"]\'
10     });
11 });
12 </script>

注意：上例中data-trigger設定在了demo元素上面，如果設定在a标簽上是無效的！

使用template，更改tooltip樣式，示範代碼：

1 <style>
 2 /* 自定義tooltip的背景色及字型顔色 */
 3 .define-tooltip-inner{
 4   background:#ccc;
 5   color: #000
 6 }
 7 
 8 /* 自定義tooltip四個不同方向箭頭樣式 */
 9 .tooltip.bs-tooltip-top .define-tooltip-arrow::before {
10   top: 0;
11   border-width: 0.4rem 0.4rem 0;
12   border-top-color: #ccc;
13 }
14 
15 .tooltip.bs-tooltip-right .define-tooltip-arrow::before {
16   right: 0;
17   border-width: 0.4rem 0.4rem 0.4rem 0;
18   border-right-color: #ccc;
19 }
20 
21 .tooltip.bs-tooltip-left .define-tooltip-arrow::before {
22   left: 0;
23   border-width: 0.4rem 0 0.4rem 0.4rem;
24   border-left-color: #ccc;
25 }
26 
27 .tooltip.bs-tooltip-bottom .define-tooltip-arrow::before {
28   bottom: 0;
29   border-width: 0 0.4rem 0.4rem;
30   border-bottom-color: #ccc;
31 }
32 
33 </style>
34 
35 <a href="#" id="hoverIt" rel="tooltip" title="這裡樣式改變了">移上2222去</a>
36 <script>
37 $(function(){
38     $(\'#hoverIt\').tooltip({
39         trigger: \'hover\',
40         template: \'<div class="tooltip" role="tooltip"><div class="arrow define-tooltip-arrow"></div><div class="tooltip-inner define-tooltip-inner"></div></div>\'
41     });
42 });

注意：template 值中define-tooltip-arrow、define-tooltip-inner這二個樣式可以根據需要進行更改（其它部份不能更改），更改時要同步更改style内的樣式。

在一些特殊情況下，需要調用程式觸發tooltip時，bootstrap4也提供了一些接口： $obj.tooltip(\'show | hide | trigger | destroy\'),

1) 調用顯示提示框： $obj.tooltip(\'show\'), 示例：

1 <a href="#" data-toggle="tooltip" title="自動彈出">自動彈出</a>
2 <script>
3   $(function(){
4     $(\'a[data-toggle="tooltip"]\').tooltip(\'show\');
5   });
6 </script>

注意：不要試圖在隐藏元素上顯示提示框！

2) 調用關閉提示框：$obj.tooltip(\'hide\')，示例：

1 <a href="#" id="autoIt" data-toggle="tooltip" title="它會自動彈出，也會自動關閉">自動彈出，5秒後自動關閉</a>
2 <script>
3   $(function(){
4     $(\'#autoIt\').tooltip(\'show\');
5     setTimeout(function(){
6       $(\'#autoIt\').tooltip(\'hide\');
7     }, 5000);
8   });
9 </script>

3) 如果目前提示框是顯示的就讓它關閉。否則讓它顯示：$obj.tooltip(\'trigger\')，示例：

1 <!-- manual  開啟手動觸發模式 -->
 2 <a href="#" id="tooltip" data-toggle="tooltip" data-trigger="manual" title="彈出關閉切換">手動觸發模式</a>
 3 <button id="trigger-btn">彈出</button>
 4 <script>
 5   $(function(){
 6     $(\'#trigger-btn\').click(function(){
 7       $(this).text()==\'彈出\' ? 
 8       $(this).text(\'關閉\') :
 9       $(this).text(\'彈出\');
10       $(\'#tooltip\').tooltip(\'toggle\');
11     });
12   });
13 </script>

4) 銷除tooltip元件, $obj.tooltip(\'destroy\'); 【好像bootstrap4中，已不存在接口】

事件

tooltip含有四種事件，執行順序如下：

show.bs.tooltip	$obj.on(\'show.bs.tooltip\', function () { // 顯示時執行 })
inserted.bs.tooltip	$obj.on(\'inserted.bs.tooltip\', function () { // 資料内容插入完成時執行 })
shown.bs.tooltip	$obj.on(\'shown.bs.tooltip\', function () { // 完全顯示後執行 })
hide.bs.tooltip	$obj.on(\'hide.bs.tooltip\', function () { // 隐藏時執行 })
hidden.bs.tooltip	$obj.on(\'hidden.bs.tooltip\', function () { // 完全隐藏後執行 })