Bootstrap5 工具提示

使用Bootstrap5 创建工具提示

工具提示是一个小的弹出窗口,当用户将鼠标指针放在链接或按钮等元素上时会出现,来提供有关悬停元素的提示或信息。

工具提示对我们网站的新访问者非常有用,因为它们使用户可以通过将鼠标指针放在图标和链接上来了解它们的用途。

步骤 1:添加工具提示标记

要创建工具提示,我们需要向元素添加 data-bs-toggle="tooltip" 属性。 可以使用 title 属性指定悬停时显示的提示文本。

这是向超链接添加工具提示的标准语法。

<a href="#" data-bs-toggle="tooltip" title="Some text">悬停在上面</a>

同样,我们可以向其他元素(例如 Button、icon 等)添加工具提示。

步骤 2:启用工具提示

工具提示可以通过 JavaScript 启用——只需在 JavaScript 代码中使用目标元素的 id、class 或任何 CSS 选择器调用Bootstrap 的 tooltip() 方法。

我们可以单独或一次性初始化工具提示。 以下 JavaScript 代码将通过 data-bs-toggle 属性选择它们来初始化页面上的所有工具提示。

document.addEventListener("DOMContentLoaded", function(){
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function(element){
        return new bootstrap.Tooltip(element);
    });
});

尝试一下

上面的实例显示的效果如下:

Bootstrap5 工具提示

注意 :出于性能原因,工具提示 data-apis 是选择加入的,这意味着要使用工具提示,我们必须自己初始化它们。 此外,永远不会显示带有零长度标题的工具提示,并且在也不会在隐藏元素触发工具提示。

提示 :必须在包装元素上触发 .disabled 或 disabled 元素的工具提示。 此外,当工具提示从跨越多行的超链接触发时,它将居中显示。 我们可以使用空格: nowrap; 在这些超链接上来避免这种行为。


设置工具提示的方向

我们可以将工具提示设置为出现在元素的顶部、右侧、底部和左侧。

通过 data 属性定位工具提示

以下示例将向展示如何通过 data 属性设置工具提示的方向。

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">顶部显示</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">右侧显示</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">底部显示</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">左侧显示</a>

尝试一下

通过 JavaScript 定位工具提示

下面示例将展示如何通过 JavaScript 设置工具提示的方向。

document.addEventListener("DOMContentLoaded", function(){
    // Placement of tooltip on top
    var tipTop = document.getElementById("tipTop");
    var tooltipTop = new bootstrap.Tooltip(tipTop, { 
        placement : "top" 
    });

    // Placement of tooltip on right
    var tipRight = document.getElementById("tipRight");
    var tooltipRight = new bootstrap.Tooltip(tipRight, { 
        placement : "right" 
    });
    
    // Placement of tooltip on bottom
    var tipBottom = document.getElementById("tipBottom");
    var tooltipBottom = new bootstrap.Tooltip(tipBottom, { 
        placement : "bottom" 
    });

    // Placement of tooltip on left
    var tipLeft = document.getElementById("tipLeft");
    var tooltipLeft = new bootstrap.Tooltip(tipLeft, { 
        placement : "left" 
    });
});

尝试一下


Options

有一些选项可以传递给Bootstrap tooltip() 方法来自定义工具提示插件的功能。

名称 类型 默认值 描述
animation boolean true 将 CSS 淡入淡出过渡应用于工具提示。
container 字符串 element boolean
delay 数字 object 0
html boolean false 将 HTML 插入工具提示。

如果为 true,工具提示标题中的 HTML 标签将在工具提示中呈现。 如果为 false,则将使用 innerText 属性将内容插入到 DOM 中。

如果您担心 XSS 攻击,请使用简单文本。
placement 函数 字符串 'top'
selector 字符串 false false
template 字符串 <div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div> 创建工具提示时要使用的基本 HTML。
工具提示的标题将被插入到 .tooltip-inner 元素中。
.tooltip-arrow 元素将成为工具提示的箭头。
最外面的包装元素应该有 .tooltip 类。
title 字符串 element 函数
trigger 字符串 'hover focus' 指定如何触发工具提示 — click
fallbackPlacements 数组 ['top', 'right', 'bottom', 'left'] 允许指定 Popper 将在回退时使用的位置。
boundary 字符串 element 'clippingParents'
customClass 字符串 函数 ''
sanitize boolean true 启用或禁用清理。 如果激活“template”和“title”选项将被清理。
allowList object 默认值 包含允许的属性和标签的对象。
sanitizeFn null 函数 null
offset 数组 字符串 函数
popperConfig null object 函数

查看笔记

扫码一下
查看教程更方便