【詳解】提示框（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代碼示例：

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

 

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

<a href="#" id="text" data-toggle="tooltip" title="<h1>bootStrap4學習之路</h1><p>漫漫長路，吾將上下求索之！</p>" data-html="true" data-placement="bottom" data-trigger="hover">顯示HTML樣式提示窗</a>

<script>
 $(function(){
     $('[data-toggle="tooltip"]').tooltip(); // 也可以使用 ('#text').tooltip(); 來啟用提示框
 });
</script>

 

方法

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

$obj.tooltip({
 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     
 delay: [數值], // 等同於data-delay，級別優先於data-delay設置
  8     // 也可以設置顯示延遲 或 隱藏延遲，如下：
 delay: {
 show: [數值], // 顯示延遲 11  hide: [數值]  // 隱藏延遲 12     },

 trigger: '[click | hover | focus | manual]', // 等同於data-trigger，級別優先於data-trigger設置 15     
 container: [string | false], // 等同於data-container, 17     
 selector: [string | false], // 選擇器，設置某一對象下指定的元素為tooltip組件 19     
    template: [string] // 默認值：'<div class="tooltip" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>
                          //  缺省下tooltip樣式是黑底白字，可以通過這個屬性自定義樣式。
});

 

使含有rel="tooltip"的鏈接變成tooltip組件：

<a href="#" rel="tooltip" title="這是一段提示文本">移上去</a>
<script>
$(function(){
    $('a[rel="tooltip"]').tooltip({
        trigger: 'hover',
        delay: 300,
        placement: 'bottom'
    });
});
</script>

 

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

<div class="demo" data-trigger="hover">
  <a href="#" rel="tooltip" title="1111111111">移上去</a>&nbsp;&nbsp;
  <a href="#" rel="tooltip" title="2222222222">這里移上去也會顯示</a>
</div>
<a href="#" rel="tooltip" title="0000000">這里移上去不會顯示</a>
<script>
$(function(){
    $('.demo').tooltip({
        selector: 'a[rel="tooltip"]'
    });
});
</script>

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

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

<style>
/* 自定義tooltip的背景色及字體顏色 */
.define-tooltip-inner{
  background:#ccc;
  color: #000
}

/* 自定義tooltip四個不同方向箭頭樣式 */
.tooltip.bs-tooltip-top .define-tooltip-arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #ccc;
}

.tooltip.bs-tooltip-right .define-tooltip-arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #ccc;
}

.tooltip.bs-tooltip-left .define-tooltip-arrow::before {
  left: 0;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #ccc;
}

.tooltip.bs-tooltip-bottom .define-tooltip-arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #ccc;
}

</style>

<a href="#" id="hoverIt" rel="tooltip" title="這里樣式改變了">移上2222去</a>
<script>
$(function(){
    $('#hoverIt').tooltip({
        trigger: 'hover',
        template: '<div class="tooltip" role="tooltip"><div class="arrow define-tooltip-arrow"></div><div class="tooltip-inner define-tooltip-inner"></div></div>'
    });
});

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

 

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

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

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

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

 

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

<a href="#" id="autoIt" data-toggle="tooltip" title="它會自動彈出，也會自動關閉">自動彈出，5秒后自動關閉</a>
<script>
  $(function(){
    $('#autoIt').tooltip('show');
    setTimeout(function(){
      $('#autoIt').tooltip('hide');
    }, 5000);
  });
</script>

 

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

<!-- manual  開啟手動觸發模式 -->
<a href="#" id="tooltip" data-toggle="tooltip" data-trigger="manual" title="彈出關閉切換">手動觸發模式</a>
<button id="trigger-btn">彈出</button>
<script>
  $(function(){
    $('#trigger-btn').click(function(){
      $(this).text()=='彈出' ? 
      $(this).text('關閉') :
      $(this).text('彈出');
      $('#tooltip').tooltip('toggle');
    });
  });
</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 () { // 完全隱藏后執行 })