当前位置：首页 > news >正文

Bootstrap 5 练习 - 显示工具提示

news 2025/7/7 22:19:29

文章目录

引言
准备工作
创建HTML文件
导入Bootstrap 5框架
编写页面代码
编写JavaScript脚本
浏览网页
注意事项
结束语

引言

大家好，今天我们将一起学习如何在Bootstrap 5中创建一个简单的工具提示（Tooltip）。工具提示是一个非常实用的用户界面元素，它可以为用户提供额外的信息，而不会干扰到页面的主要内容。在本教程中，我们将创建一个带有工具提示的按钮，并确保当用户将鼠标悬停在按钮上时，工具提示能够正确显示。

准备工作

在开始之前，请确保你的工作环境已经设置好。你需要一个文本编辑器来编写HTML代码，以及一个现代浏览器来查看你的成果。此外，我们将使用Bootstrap 5，所以请确保你的网络连接正常，以便能够加载Bootstrap的CSS和JavaScript文件。

创建HTML文件

首先，我们将在D:\bootstrap5_work\目录下创建一个新的HTML文件，命名为tooltip_demo.html。

导入Bootstrap 5框架

在HTML文件的<head>部分，我们需要导入Bootstrap 5的CSS和JavaScript文件。这将使我们能够使用Bootstrap的样式和组件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap 5 Tooltip Demo</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body><!-- 页面内容将在这里 -->
</body>
</html>

编写页面代码

接下来，我们将在<body>标签内添加一个容器，其中包含一个按钮。这个按钮将显示我们的工具提示。

<div class="container-fluid p-5 bg-primary text-white text-center"><h1>探索 Bootstrap 5 世界~</h1>     <button id="btnWelcome" type="button" class="btn btn-warning mt-5" data-bs-toggle="tooltip" data-bs-placement="right" title="欢迎访问泸州职业技术学院">欢迎</button>
</div>

编写JavaScript脚本

现在，我们将添加JavaScript代码来初始化工具提示。请注意，Bootstrap 5的工具提示是自动初始化的，所以我们不需要手动创建工具提示实例。我们将使用Bootstrap提供的API来显示工具提示。

<script>// 获取按钮对象var btnWelcome = document.getElementById('btnWelcome');// 给按钮创建工具提示var tooltip = new bootstrap.Tooltip(btnWelcome);// 显示工具提示tooltip.show();
</script>

浏览网页

保存你的HTML文件，并在浏览器中打开它。当你将鼠标移动到“欢迎”按钮上时，应该会看到一个工具提示出现。

注意事项

如果你在加载Bootstrap的CSS或JavaScript文件时遇到问题，请检查你的网络连接，并确保文件链接是正确的。如果问题仍然存在，尝试刷新页面或稍后再试。

结束语

恭喜你完成了Bootstrap 5工具提示的实战演练！现在你已经掌握了如何在Bootstrap 5中创建和显示工具提示。这是一个很好的起点，你可以在此基础上继续探索Bootstrap的其他功能和组件。

注意： 如果在尝试访问Bootstrap CSS文件时遇到问题，请确保你的网络连接正常，并且链接是正确的。如果问题仍然存在，可能是因为网络问题或者链接本身的问题。请检查链接的合法性，并在必要时重试。如果不需要这个链接的解析，也可以继续完成上述步骤来创建工具提示。