bootStrap4 提示框（tooltip）的使用

渺小的人类發表於2024-06-20
boot

參考文章：https://www.cnblogs.com/wm218/p/10869823.html

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"時，提示窗儘可能顯示在左邊,在情況不允許的情況下它才顯示在右邊

例項：

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

方法

還可以透過tooltip的option設定來實現更多功能，tooltip函式原型： 

$obj.tooltip({
    title: '', // 提示框顯示的文字內容。如果同時設定了屬性的title，則優先屬性title設定
    placement: '[left | top | right | bottom]', // 等同於data-placement，級別優先於data-placement設定
    html: [true | false], // 等同於data-html，級別優先於data-html設定
    animation: [true | false], // 等同於data-animation，級別優先於data-animation設定

    delay: [數值], // 等同於data-delay，級別優先於data-delay設定
    // 也可以設定顯示延遲 或 隱藏延遲，如下：
    delay: {
        show: [數值], // 顯示延遲
        hide: [數值]  // 隱藏延遲
    },

    trigger: '[click | hover | focus | manual]', // 等同於data-trigger，級別優先於data-trigger設定

    container: [string | false], // 等同於data-container,

    selector: [string | false], // 選擇器，設定某一物件下指定的元素為tooltip元件

    template: [string] // 預設值：'<div class="tooltip" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>                          //  預設下tooltip樣式是黑底白字，可以透過這個屬性自定義樣式。
});

相關文章