什么是工具提示以及如何在 Bootstrap 中创建它？

Tooltip 就像一个气球或一个小屏幕提示，用于向任何对象显示文本描述。当用户使用光标将鼠标悬停在对象上时，会显示一个工具提示。它是网站中非常有用的部分，现在几乎可以在所有网站中找到，包括一些 Web 应用程序，如 Adobe Photoshop、Adobe Illustrator 等等。工具提示对新用户非常有帮助，用户可以通过阅读工具提示文本了解对象。

现在，在了解了工具提示的基本概念之后，让我们学习如何使用 Bootstrap 框架创建工具提示。

在 Bootstrap 中创建工具提示：

第一步：首先从Bootstrap官网导入Bootstrap CSS和JavaScript的所有Bootstrap CDN。

---

我们使用按钮来显示工具提示效果，但是，您也可以将工具提示与其他引导组件一起使用。过程非常相似。

第 3 步：将 JavaScript 代码段添加到下面给出的 HTML 文件中。我们使用 Tooltip()函数在鼠标悬停时触发工具提示。我们使用 forEach() 循环将工具提示选项添加到所有具有工具提示的对象。您还可以将工具提示添加到 HTML 文件中的每个单独对象。

Javascript

    const tooltips = document.querySelectorAll(".tooltip");
    tooltips.forEach(t => {
        new bootstrap.Tooltip(t);
    });

第 4 步：我们已经成功在 Bootstrap 中创建了工具提示。

HTML

  

    
    
    
    
    
    

  

    GeeksforGeeks
    
    
        Tooltip on top
    
    
        Tooltip on right
    
    
        Tooltip on bottom
    
    
        Tooltip on left
    
    
    
    
    
        const tooltips = document.querySelectorAll(".tool");
        tooltips.forEach(t => {
            new bootstrap.Tooltip(t);
        });
    

输出：

注意：我们已经展示了带有按钮组件的示例，您也可以将其应用于其他组件，如段落、图标。