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

Bootstrap 5学习教程，从入门到精通，Bootstrap 5 提示框(Tooltips) 语法知识点及案例（21）

news 来源：原创 2025/6/24 14:18:14

Bootstrap 5 提示框(Tooltips) 语法知识点及案例

一、提示框语法知识点

1. 基本概念

提示框(Tooltips)是当用户悬停在元素上时显示的小浮动标签，用于提供额外信息。

2. 核心属性

data-bs-toggle="tooltip" - 标识元素为提示框触发器
title - 提示框显示的内容
data-bs-placement - 提示框位置(top, right, bottom, left)
data-bs-trigger - 触发方式(hover, focus, click, manual)
data-bs-delay - 显示/隐藏延迟时间(毫秒)
data-bs-html - 是否允许HTML内容(false/true)
data-bs-custom-class - 自定义CSS类名
data-bs-offset - 提示框偏移量(像素)
data-bs-container - 提示框附加到的容器
data-bs-boundary - 提示框的溢出约束边界
data-bs-animation - 是否启用淡入淡出动画(true/false)
data-bs-template - 自定义提示框HTML模板

3. 初始化方法

必须通过JavaScript初始化提示框：

// 初始化所有提示框
var tooltipList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
tooltipList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl)
})// 或初始化单个提示框
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl)

4. 方法

show() - 显示提示框
hide() - 隐藏提示框
toggle() - 切换显示/隐藏
dispose() - 销毁提示框
enable() - 启用提示框
disable() - 禁用提示框
toggleEnabled() - 切换启用/禁用状态
update() - 更新提示框位置

5. 事件

show.bs.tooltip - 显示前触发
shown.bs.tooltip - 显示后触发
hide.bs.tooltip - 隐藏前触发
hidden.bs.tooltip - 隐藏后触发
inserted.bs.tooltip - 提示框模板插入DOM后触发

二、完整案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap 5 提示框示例</title><!-- 引入Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><style>/* 自定义样式 */.custom-tooltip .tooltip-inner {background-color: #ff5722;font-size: 1.1em;}.custom-tooltip.bs-tooltip-end .tooltip-arrow::before {border-right-color: #ff5722;}.custom-tooltip.bs-tooltip-start .tooltip-arrow::before {border-left-color: #ff5722;}.custom-tooltip.bs-tooltip-top .tooltip-arrow::before {border-top-color: #ff5722;}.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before {border-bottom-color: #ff5722;}.demo-area {margin: 50px auto;padding: 20px;border: 1px dashed #ccc;border-radius: 5px;}.btn-container {display: flex;gap: 10px;flex-wrap: wrap;margin: 20px 0;}</style>
</head>
<body><div class="container"><h1 class="text-center my-5">Bootstrap 5 提示框(Tooltips)示例</h1><!-- 基本示例 --><div class="demo-area"><h3>1. 基本提示框</h3><div class="btn-container"><button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="这是默认提示框">悬停查看提示</button><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="顶部提示框">顶部提示</button><button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="right" title="右侧提示框">右侧提示</button><button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="底部提示框">底部提示</button><button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="left" title="左侧提示框">左侧提示</button></div></div><!-- 触发方式 --><div class="demo-area"><h3>2. 不同触发方式</h3><div class="btn-container"><button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-trigger="hover" title="悬停触发(默认)">Hover触发</button><button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-trigger="focus" title="聚焦触发">Focus触发</button><button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-trigger="click" title="点击触发">Click触发</button><button type="button" class="btn btn-info" id="manual-tooltip" data-bs-toggle="tooltip" data-bs-trigger="manual" title="手动控制提示框">手动控制</button><button type="button" class="btn btn-outline-secondary" onclick="showManualTooltip()">显示提示</button><button type="button" class="btn btn-outline-secondary" onclick="hideManualTooltip()">隐藏提示</button></div></div><!-- 高级功能 --><div class="demo-area"><h3>3. 高级功能</h3><div class="btn-container"><!-- 延迟显示 --><button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-delay='{"show":500, "hide":100}' title="延迟500ms显示，100ms隐藏">延迟效果</button><!-- HTML内容 --><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>斜体</em> <u>下划线</u> <b>加粗</b> <span class='text-danger'>红色文字</span>">HTML内容</button><!-- 自定义样式 --><button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-custom-class="custom-tooltip" title="自定义样式的提示框">自定义样式</button><!-- 偏移量 --><button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-offset="10,20" title="偏移量x=10,y=20">偏移提示</button></div><!-- 动态内容 --><div class="mt-4"><button type="button" class="btn btn-warning" id="dynamic-tooltip" data-bs-toggle="tooltip" title="初始内容">动态更新内容</button><button type="button" class="btn btn-outline-warning" onclick="updateTooltipContent()">更新内容</button></div><!-- 禁用/启用 --><div class="mt-4"><button type="button" class="btn btn-info" id="toggle-tooltip" data-bs-toggle="tooltip" title="我可以被禁用">禁用/启用控制</button><button type="button" class="btn btn-outline-info" onclick="disableTooltip()">禁用提示</button><button type="button" class="btn btn-outline-info" onclick="enableTooltip()">启用提示</button></div></div><!-- 表单元素提示 --><div class="demo-area"><h3>4. 表单元素提示</h3><form><div class="mb-3"><label for="username" class="form-label">用户名</label><input type="text" class="form-control" id="username" data-bs-toggle="tooltip" data-bs-placement="right" title="请输入4-16位字母或数字"></div><div class="mb-3"><label for="password" class="form-label">密码</label><input type="password" class="form-control" id="password" data-bs-toggle="tooltip" data-bs-trigger="focus" data-bs-placement="bottom" title="至少8位，包含字母和数字"></div><div class="mb-3 form-check"><input type="checkbox" class="form-check-input" id="agree" data-bs-toggle="tooltip" data-bs-placement="right" title="请阅读用户协议后勾选"><label class="form-check-label" for="agree">同意条款</label></div></form></div></div><!-- 引入Bootstrap 5 JS 及其依赖 --><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script><script>// 页面加载完成后初始化所有提示框document.addEventListener('DOMContentLoaded', function() {// 初始化页面上的所有提示框var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))tooltipTriggerList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl)})// 为动态内容提示框添加事件监听var dynamicTooltip = document.getElementById('dynamic-tooltip')var dynamicTooltipInstance = bootstrap.Tooltip.getInstance(dynamicTooltip)dynamicTooltip.addEventListener('shown.bs.tooltip', function () {console.log('动态提示框已显示')})dynamicTooltip.addEventListener('hidden.bs.tooltip', function () {console.log('动态提示框已隐藏')})})// 手动控制提示框的函数function showManualTooltip() {var manualTooltip = bootstrap.Tooltip.getInstance(document.getElementById('manual-tooltip'))manualTooltip.show()}function hideManualTooltip() {var manualTooltip = bootstrap.Tooltip.getInstance(document.getElementById('manual-tooltip'))manualTooltip.hide()}// 更新提示框内容function updateTooltipContent() {var dynamicTooltip = document.getElementById('dynamic-tooltip')var dynamicTooltipInstance = bootstrap.Tooltip.getInstance(dynamicTooltip)var newContent = '更新时间: ' + new Date().toLocaleTimeString()dynamicTooltip.setAttribute('data-bs-original-title', newContent)dynamicTooltipInstance.update()}// 禁用/启用提示框function disableTooltip() {var toggleTooltip = document.getElementById('toggle-tooltip')var toggleTooltipInstance = bootstrap.Tooltip.getInstance(toggleTooltip)toggleTooltipInstance.disable()}function enableTooltip() {var toggleTooltip = document.getElementById('toggle-tooltip')var toggleTooltipInstance = bootstrap.Tooltip.getInstance(toggleTooltip)toggleTooltipInstance.enable()}</script>
</body>
</html>

三、代码说明

基本提示框：展示了不同位置的提示框(top, right, bottom, left)
触发方式：
- hover: 鼠标悬停触发(默认)
- focus: 元素获得焦点时触发
- click: 点击元素时触发
- manual: 手动控制显示/隐藏
高级功能：
- 延迟显示/隐藏
- 支持HTML内容
- 自定义样式
- 设置偏移量
- 动态更新内容
- 禁用/启用提示框
表单元素：展示了在表单输入框和复选框上使用提示框
JavaScript控制：
- 手动显示/隐藏提示框
- 动态更新提示内容
- 禁用/启用提示功能
- 事件监听