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);
    });
});

尝试一下

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

注意 ：出于性能原因，工具提示 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() 方法来自定义工具提示插件的功能。