如何在 Bootstrap 的按钮中设置工具提示的位置？

工具提示用于在鼠标指针移动时向用户提供有关元素的交互式文本提示。例如，在下图中，GeeksForGeeks 是一个按钮，当用户鼠标移到它上面时，将显示附加信息“计算机科学门户”弹出窗口。我们将学习如何创建工具提示以及如何将工具提示定位在不同的位置。

实施工具提示的分步指南：

第 1 步：在代码的 head 部分中包含所有引导库。

步骤 2：要在 HTML 的按钮控件中实现工具提示，请应用data-toggle属性，如下所示：

    Hover over me
 

第 3 步：要在引导程序中实现工具提示，只需遵循代码脚本部分中的语法即可。

$(function(){
    $('[data-toggle="tooltip"]').tooltip();
})

示例 1：下面演示 bootstrap 的 tooltip 功能。这显示了“顶部”和“底部”工具提示。

HTML

  

    
    
  
    
    
    
    
    
    
    
  
    
        $(function() {
            $('[data-toggle="tooltip"]').tooltip();
        });
    

  

    GeeksforGeeks
    Tooltip tutorial
  
    
        Hover over me to see top tooltip
    
    
  
    
        Hover over me to see bottom tooltip
    

  

输出：

顶部底部工具提示

示例 2：使用上面给出的底部工具提示片段更改上面的代码。您还可以将数据放置更改为左或右 分别将工具提示放置在左侧和右侧。

HTML

  

    
    
  
    
    
    
    
    
    
    
  
    
        $(function() {
            $('[data-toggle="tooltip"]').tooltip();
        });
    
  
    
        .btn {
            margin: 10px;
        }
    

  

    GeeksforGeeks
  
    Tooltip tutorial
  
    
        Hover over me to see RIGHT tooltip
    

  

输出：

正确的工具提示

结论：我们已经学会了如何在任何方向放置工具提示。您可以对链接或 div 容器使用相同的结果，结果将是相同的。