Bootstrap5 信息提示框学习笔记

什么是信息提示框

信息提示框（Tooltip）是一种常见的网页组件，可以用于在鼠标悬停时显示文本提示。

Bootstrap5 提供了一个强大的信息提示框组件，可以轻松地将它集成到你的网站或应用程序中。

如何创建信息提示框

在 Bootstrap5 中，使用 data-bs-toggle="tooltip" 属性来启用信息提示框，并使用 title 属性来设置提示文本。

例如，下面的代码会创建一个带有提示文本的按钮：

htmlCopy Code
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="This is a tooltip">Hover over me</button>

当用户将鼠标悬停在该按钮上时，会显示一个带有提示文本的信息提示框。

如何自定义信息提示框

Bootstrap5 的信息提示框组件提供了广泛的自定义选项，以便根据需要进行调整。

以下是一些常见的自定义选项：

data-bs-animation：设置提示框的动画效果。
data-bs-delay：设置提示框的延迟显示时间（单位为毫秒）。
data-bs-html：设置提示框是否支持 HTML 内容。
data-bs-placement：设置提示框的位置。
data-bs-template：设置自定义的提示框模板。

例如，下面的代码会创建一个具有自定义选项的信息提示框：

htmlCopy Code
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay="500" title="This is a tooltip with custom options">Hover over me</button>

该示例将提示框放置在按钮下方，设置了 500 毫秒的延迟显示时间，并使用自定义文本作为提示文本。

实例演示

下面是一个完整的示例，演示如何创建一个带有信息提示框的按钮，并自定义提示框的选项：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap5 Tooltip Example</title>
	<!-- 引入 Bootstrap5 样式 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>
<body>

	<div class="container py-5">
		<h1>Bootstrap5 Tooltip Example</h1>

		<!-- 创建带有信息提示框的按钮 -->
		<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-delay="500" title="This is a tooltip with custom options">Hover over me</button>
	</div>

	<!-- 引入 Bootstrap5 JS -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

	<!-- 初始化提示框插件 -->
	<script>
		var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
		var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
		  return new bootstrap.Tooltip(tooltipTriggerEl)
		})
	</script>

</body>
</html>

这里，我们创建了一个带有信息提示框的按钮，并设置了自定义选项，包括将提示框放置在按钮下方、设置 500 毫秒的延迟显示时间以及使用自定义文本作为提示文本。

该示例还包括引入 Bootstrap5 的 CSS 和 JS 文件，并初始化提示框插件的 JavaScript 代码。

打开该示例，当用户将鼠标悬停在按钮上时，会显示自定义的提示框。