解释Bootstrap Tooltip

在Bootstrap框架中，Tooltip是一个插件，当用户将鼠标指针悬停在一个元素上时，会显示一个小弹出框。例如，当用户指向一个链接或按钮等时，一个小的弹出框就会被悬停，上面有关于该元素的提示或信息。这个Tooltip插件一般用于当我们想显示网页上每个组件的用途时，只需将鼠标指针移到该组件上。

为了实现工具提示，我们需要在一个元素上添加data-toggle=”tooltip”属性，标题属性用于在悬停时显示文本。我们必须通过使用tooltip()方法来初始化Tooltip以触发，Tooltip通过JavaScript来实现，在JavaScript代码中指定目标元素的id、class或任何CSS选择器。在这篇文章中，我们将学习Bootstrap中的工具提示，以及它的配置和实现。更多细节请参考Bootstrap 4 | Tooltip文章。

设置bootstrap工具提示插件的步骤：

将Bootstrap和jQuery CDN纳入<head>标签

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>

在HTML元素中添加工具提示标记 –

<a href="#" data-toggle="tooltip" 
    title="Some Information or Hint">
    Hover over me
</a>

在<script>标签中添加jQuery以触发工具提示 –

<script>
    (document).ready(function () {('[data-toggle="tooltip"]').tooltip();
    });
</script>

定位工具提示（可选） –

默认情况下，bootstrap工具提示插件将总是出现在元素的顶部。但是我们可以使用data-placement属性来改变工具提示插件的位置，这样我们就可以把工具提示放在元素的顶部、底部、左侧或右侧。

<a href="#" data-toggle="tooltip" 
    data-placement="top" 
    title="Tooltip on top">
    Tooltip on top
</a>

<a href="#" data-toggle="tooltip" 
    data-placement="bottom" 
    title="Tooltip on bottom">
    Tooltip on bottom
</a>

<a href="#" data-toggle="tooltip" 
    data-placement="left" 
    title="Tooltip on left">
    Tooltip on left
</a>

<a href="#" data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right">
    Tooltip on right
</a>

我们还可以通过JavaScript来定位工具提示。

<script>
    (document).ready(function () {

        //.tooltip-**** is the class        // specified in the html element(".tooltip-top").tooltip({ placement: "top" });
        (".tooltip-right").tooltip({ placement: "right" });(".tooltip-bottom").tooltip({ placement: "bottom" });
        $(".tooltip-left").tooltip({ placement: "left" });
    });
</script>

在这个阶段，我们已经成功地配置了工具提示，开始工作。

示例:

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap Tooltip Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
</head>
  
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
          
        <h5>Bootstrap Tooltip Example</h5>
        <br />
          
        <a href="#" data-toggle="mytooltip" 
            title="A Computer Science portal for geeks">
            Hover me
        </a>
    </div>
  
    <script>
  
        // Add below code to trigger tooltip
        (document).ready(function () {
            ('[data-toggle="mytooltip"]').tooltip();
        });
    </script>
</body>
  
</html>