解释Bootstrap Tooltip

解释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>

输出:

解释Bootstrap Tooltip

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程