如何使用 Bootstrap 在按钮中定位工具提示？

在Bootstrap 4 中，您可以在不同方向（左、右、上、下）放置工具提示。工具提示的位置是在 bootstrap.js 之前使用第三方库 (Popper.js) 设置的，以便工具提示起作用。

方法：定位工具提示所需的标记位于数据放置上，您可以在其中将工具提示设置为

• 底部
• 对
• 最佳
• 剩下

CDN 链接：在 HTML 代码的 head 部分包含以下文件。

按钮被赋予一个唯一的 ID，在 jQuery 代码中引用它来启动工具提示。此 jQuery 代码仅启动工具提示以在悬停时显示如下：

句法：

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

示例 1：以下代码使用 data-placement属性演示了上述工具提示定位。工具提示与按钮元素相关联。当您将鼠标悬停在按钮上时，工具提示会显示在默认的底部位置。

• 工具提示位置底部

• 工具提示位置顶部

HTML

  
    
    
  
    
    
    
    
    
    
    
    
    
    
      $(function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    
  
  
  
    GeeksforGeeks
    Tooltip tutorial
    
      Hover over me to see top tooltip
    
    
    
      Hover over me to see bottom tooltip
    
  

输出：

示例：以下代码演示了工具提示在按钮右侧和左侧的定位。

• 左侧工具提示位置：

• 工具提示位置右侧：

HTML

  
    
    
  
    
    
    
    
    
    
    
    
    
  
    
      $(function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    
    
      .btn {
        margin: 10px;
      }
    
  
  
  
    GeeksforGeeks
    Tooltip tutorial
  
    
        Hover over me to see Right tooltip
    
  
    
       Hover over me to see Left tooltip
    
  

输出：

您可以按照 Bootstrap 4 工具提示文章了解有关工具提示的所有其他内容。