<think>我们参考了用户提供的引用资料，其中引用[3]提到
Bootstrap5移除了jQuery，使用原生JavaScript，并且支持CSSGrid布局。用户的问题是如何使用
Bootstrap5创建前端
提示框（可能是tooltip或popover），并希望得到方法或示例。根据
Bootstrap5的官方文档，
提示框（Tooltip）和弹出框（Popover）是两个不同的组件，但用法相似。用户所说的“
提示框”可能指的是其中一种。这里我们以常见的Tooltip为例进行说明。在
Bootstrap5中，Tooltip组件的使用步骤如下：1.引入必要的
BootstrapCSS和JS文件。2.在HTML中定义需要添加tooltip的元素（例如按钮）。3.初始化Tooltip，可以通过data属性或JavaScript初始化。注意：在
Bootstrap5中，由于不再依赖jQuery，因此初始化使用原生JavaScript方法。以下是一个使用
Bootstrap5创建Tooltip的示例：**步骤1：引入
Bootstrap文件**在HTML的头部引入
Bootstrap的CSS，在body结束前引入
Bootstrap的JS（注意：
Bootstrap的JS依赖于Popper.js，而官方提供的bundle版本已经包含了Popper）。```html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>
Bootstrap5Tooltip示例</title><!--引入
BootstrapCSS--><linkhref="https://cdn.jsdelivr.net/npm/
bootstrap@
5.3.0/dist/css/
bootstrap.min.css"rel="stylesheet"></head><body><!--示例按钮--><buttontype="button"class="btnbtn-primary"id="myButton"data-bs-toggle="tooltip"data-bs-placement="top"title="这是一个
提示框！">悬停在我上面</button><!--引入
BootstrapJS（包含Popper）--><scriptsrc="https://cdn.jsdelivr.net/npm/
bootstrap@
5.3.0/dist/js/
bootstrap.bundle.min.js"></script><!--初始化Tooltip--><script>//当文档加载完成时初始化document.addEventListener('DOMContentLoaded',function(){//选择所有具有tooltip功能的元素vartooltipTriggerList=[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))//为每个元素初始化tooltipvartooltipList=tooltipTriggerList.map(function(tooltipTriggerEl){returnnew
bootstrap.Tooltip(tooltipTriggerEl)})});</script></body></html>```**说明：**-我们在按钮上使用了属性`data-bs-toggle="tooltip"`来声明这是一个tooltip触发器。-`title`属性用于设置
提示框的内容。-`data-bs-placement`属性设置
提示框的位置（top,bottom,left,right）。-在JavaScript初始化部分，我们选择了所有具有`data-bs-toggle="tooltip"`的元素，并分别初始化Tooltip。**注意：**如果只需要初始化一个tooltip，也可以直接通过其id或特定选择器初始化：```javascriptvarmyButton=document.getElementById('myButton');vartooltip=new
bootstrap.Tooltip(myButton);```**对于弹出框（Popover）**，使用方式类似，只是将`tooltip`替换为`popover`，并且需要更多的配置（例如，内容通常放在`data-bs-content`属性中）。如果用户需要的是Popover，可以参考以下示例：```html<buttontype="button"class="btnbtn-primary"data-bs-toggle="popover"title="弹出框标题"data-bs-content="弹出框内容">点击我查看弹出框</button><script>document.addEventListener('DOMContentLoaded',function(){varpopoverTriggerList=[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))varpopoverList=popoverTriggerList.map(function(popoverTriggerEl){returnnew
bootstrap.Popover(popoverTriggerEl)})});</script>```**总结：**使用
Bootstrap5创建
提示框（Tooltip）或弹出框（Popover）的步骤：1.正确引入
BootstrapCSS和JS文件（使用bundle版本，包含Popper）。2.在HTML元素上添加相应的属性（如data-bs-toggle,title等）。3.使用JavaScript初始化对应的组件（Tooltip或Popover）。希望这个示例能帮助用户快速上手
Bootstrap5的
提示框设计。§§相关问题§§1.如何在
Bootstrap5中自定义
提示框的样式？2.
Bootstrap5中的
提示框和弹出框有什么区别？3.如何控制
提示框的显示和隐藏？</think>
### 如何使用
Bootstrap 5 创建前端
提示框
在
Bootstrap 5 中，
提示框（Tooltip）主要通过 `data-bs-toggle="tooltip"` 属性和 JavaScript 初始化实现，其核心组件已完全改用原生 JavaScript 实现（不再依赖 jQuery）[^3]。以下是创建
提示框的具体方法和示例：
---
#### 方法步骤
1. **基础 HTML 结构**
```html
<!--
提示框触发元素（按钮/链接） -->
<button type="button" class="btn btn-primary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="这是提示内容">
悬停查看提示
</button>
```
2. **JavaScript 初始化**
```html
<script>
// 页面加载完成后初始化所有
提示框
document.addEventListener('DOMContentLoaded', function() {
var tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
tooltipTriggerList.forEach(function(tooltipTriggerEl) {
new
bootstrap.Tooltip(tooltipTriggerEl);
});
});
</script>
```
3. **关键属性说明**
- `data-bs-toggle="tooltip"`：声明元素为
提示框触发器
- `title`：
提示框显示的内容
- `data-bs-placement`：控制位置（`top`/`bottom`/`left`/`right`）
---
#### 完整示例
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/
bootstrap@
5.3.0/dist/css/
bootstrap.min.css" rel="stylesheet">
<title>
Bootstrap 5 提示框示例</title>
</head>
<body class="p-4">
<div class="my-4">
<button type="button" class="btn btn-success me-2"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="顶部提示信息">
顶部提示
</button>
<button type="button" class="btn btn-warning"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="底部提示信息">
底部提示
</button>
</div>
<!--
Bootstrap JS (含Popper) -->
<script src="https://cdn.jsdelivr.net/npm/
bootstrap@
5.3.0/dist/js/
bootstrap.bundle.min.js"></script>
<!-- 初始化
提示框 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
tooltips.forEach(t => new
bootstrap.Tooltip(t));
});
</script>
</body>
</html>
```
---
#### 高级功能实现
1. **自定义样式**
```css
/* 自定义
提示框样式 */
.tooltip-inner {
background-color: #4a00e0;
border-radius: 8px;
padding: 10px;
}
.bs-tooltip-top .tooltip-arrow::before {
border-top-color: #4a00e0;
}
```
2. **动态内容**
```javascript
// 通过JavaScript更新提示内容
const btn = document.getElementById('myBtn');
const tooltip = new
bootstrap.Tooltip(btn, {
title: () => new Date().toLocaleTimeString() // 动态生成内容
});
```
3. **交互控制**
```javascript
// 手动控制
提示框
const myTooltip =
bootstrap.Tooltip.getInstance('#myBtn');
myTooltip.show(); // 显示提示
myTooltip.hide(); // 隐藏提示
```
---
**关键注意事项**
1.
Bootstrap 5 移除了 jQuery 依赖[^3]，必须使用原生 JavaScript 初始化组件
2.
提示框需要 **Popper.js**（已包含在 `
bootstrap.bundle.min.js` 中）
3. 移动设备上
提示框需用户点击激活（符合无障碍设计标准）
最低0.47元/天 解锁文章
扫一扫
512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
