解释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>
输出: