以下是创建和使用 Bootstrap 4 信息提示框的基本步骤：
1. 引入 Bootstrap 样式和脚本：
在你的 HTML 文件中引入 Bootstrap 的样式文件和 JavaScript 脚本。确保按照正确的顺序引入这些文件：
<!-- 引入 Bootstrap 样式文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css">
<!-- 引入 Bootstrap JavaScript 和 Popper.js（用于处理弹出框定位） -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/js/bootstrap.min.js"></script>
2. 添加提示框的触发元素：
在你的 HTML 中添加一个元素，这个元素将触发提示框的显示。通常，这是一个带有 data-toggle="tooltip" 属性的元素：
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
上述例子中，按钮上使用了 data-toggle="tooltip" 属性，表示它将触发一个提示框。data-placement 属性用于指定提示框的位置，可以是 "top"、"bottom"、"left" 或 "right"。
3. 初始化提示框：
在页面加载时，需要初始化提示框。你可以通过 JavaScript 来调用 tooltip() 方法来初始化：
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
这个脚本会查找带有 data-toggle="tooltip" 属性的元素，并将其转换为提示框。
现在，当用户将鼠标悬停在带有 data-toggle="tooltip" 属性的按钮上时，就会显示一个提示框。
你可以根据需要在触发元素上添加其他属性，以定制提示框的行为和样式。有关更多选项和定制内容，请查阅 [Bootstrap 4 文档中的 Tooltip 部分](https://getbootstrap.com/docs/4.6/components/tooltips/)。
转载请注明出处：http://www.zyzy.cn/article/detail/5488/Bootstrap