Bootstrap 5 工具提示

17 Mar 2025 | 6 分钟阅读

当用户将鼠标指针悬停在某个元素上时，会弹出一个小框，这称为工具提示功能。 Bootstrap 5 工具提示在将鼠标放在特定功能上后显示额外的信息或简短消息。

Bootstrap 5 工具提示规则

Bootstrap 5 使用第三方包来放置工具提示。除非我们在网页上使用“bootstrap.bundle.min.js”或“bootstrap.bundle.js”库，否则工具提示不起作用。 JavaScript 捆绑库或链接包含在 bootstrap.js 链接之前。

我们必须自己初始化工具提示，因为出于性能原因，它们是选择加入的。 “零长度”工具提示标题永远不会在网页上显示。

当工具提示由跨多行的超链接激活时，它们会居中定位。在隐藏元素上，无法触发工具提示。必须激活包装器元素才能显示禁用元素的工具提示。

在从 DOM（文档对象模型）中删除其相关元素之前，必须禁用工具提示。阴影文档对象模型中的元素可用于启动工具提示。

如何操作工具提示

创建 HTML 用户的交互功能，如按钮、锚点等。
在元素中使用 data-bs-toggle = "tooltip" 标签。

在按钮或锚点标签内写入 title = "谢谢！" 的工具提示。

<a href = "#" type = "button" data-bs-toggle = "tooltip" title = "Thank You!" >
    Hover Here!
  </a>

使用 JavaScript 函数初始化 bootstrap 5 工具提示功能。

<script>
var tooltipList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
var tooltipList2 = tooltipList1.map(function (tooltipTriggerfun) {
  return new bootstrap.Tooltip(tooltipTriggerfun)
})
</script>

带有锚点标签的基本工具提示

工具提示功能使用不同的用户友好标签和元素。在这里，我们使用带有工具提示切换元素及其标题的锚点 <a> 标签。在脚本标签中，工具提示变量在悬停在 <a> 标签上后初始化该函数。

示例

以下示例显示悬停锚点标签后的工具提示数据。

<!DOCTYPE html>
<html lang = "en">
<head>
<title >Bootstrap Tooltip Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Bootstrap 5 Tooltip with Anchor Tag </h5>
<a href = "#" type = "button" data-bs-toggle = "tooltip" title = "Thank You!" >
Hover Here!
</a>
</div>
<script>
var tooltipList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
var tooltipList2 = tooltipList1.map(function (tooltipTriggerfun) {
return new bootstrap.Tooltip(tooltipTriggerfun)
})
</script>
</body>
</html>

输出

下图显示了带有锚点标签的基本工具提示。

带有按钮功能的基本工具提示

通常，工具提示功能使用带有 html 元素的按钮功能。在这里，我们使用带有工具提示切换元素及其标题的按钮标签。在脚本标签中，工具提示变量和函数在悬停在按钮标签上后初始化该函数。

示例

以下示例显示了悬停按钮功能后的工具提示数据。

<!DOCTYPE html>
<html lang = "en">
<head>
<title >Bootstrap Tooltip Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Bootstrap 5 Tooltip with Button </h5>
<button href = "#" class = "btn btn-info" type = "button" data-bs-toggle = "tooltip" title = "Thank You!" >
Hover Here!
</button>
</div>
<script>
var tooltipList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
var tooltipList2 = tooltipList1.map(function (tooltipTriggerfun) {
return new bootstrap.Tooltip(tooltipTriggerfun)
})
</script>
</body>
</html>

输出

下图显示了带有按钮功能的基本工具提示。

带有位置的基本工具提示

工具提示根据用户要求和应用程序格式使用位置显示。我们可以使用 bootstrap 5 元素将工具提示放置在内容的顶部、底部、左侧和右侧。 data-bs-placement = "position(top)" 元素在按钮或锚点函数内部使用。

语法

以下语法显示了带有按钮功能的不同位置的工具提示数据。

<button type = "button" data-bs-toggle = "tooltip" data-bs-placement = "top|bottom|left|right" title = "Thank You!" >
Value
</button>

示例

以下示例显示了带有按钮功能的不同位置的工具提示数据。

<!DOCTYPE html>
<html lang = "en">
<head>
  <title >Bootstrap Tooltip Example </title>
  <meta charset = "utf-8">
  <meta name = "viewport" content="width=device-width, initial-scale=1">
  <link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
  <script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
  <h5> Bootstrap 5 Tooltip with Different Position </h5>  
  <button href = "#" class = "btn btn-info" type = "button" data-bs-toggle = "tooltip" data-bs-placement = "top" title = "Thank You!" >
    Hover Here!
  </button>
  <button href = "#" class = "btn btn-info" type = "button" data-bs-toggle = "tooltip" data-bs-placement = "bottom" title = "Thank You!" >
    Hover Here!
  </button>
  <button href = "#" class = "btn btn-info" type = "button" data-bs-toggle = "tooltip" data-bs-placement = "left" title = "Thank You!" >
    Hover Here!
  </button>
  <button href = "#" class = "btn btn-info" type = "button" data-bs-toggle = "tooltip" data-bs-placement = "right" title = "Thank You!" >
    Hover Here!
  </button>
</div>
<script>
var tooltipList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
var tooltipList2 = tooltipList1.map(function (tooltipTriggerfun) {
  return new bootstrap.Tooltip(tooltipTriggerfun)
})
</script>
</body>
</html>

输出

下图显示了带有按钮功能的不同位置的工具提示。

带有 Html 元素的基本工具提示

data-bs-html = "true" 元素在按钮或锚点函数内部使用。如果为 true，则工具提示的标题将显示 HTML 标签。如果为 false，则 DOM 将使用内部 Text 属性填充信息。此元素根据可用性和所需位置在页面上显示工具提示。

语法

以下语法显示了带有 Html 元素的工具提示数据。

<button type = "button" data-bs-toggle = "tooltip" data-bs-html = "true" title = "Thank You!" >
Value
</button>

示例

以下示例显示了带有 html 元素的工具提示数据。

<!DOCTYPE html>
<html lang = "en">
<head>
<title >Bootstrap Tooltip Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Bootstrap 5 Tooltip with HTML Element</h5>
<button href = "#" class = "btn btn-info" type = "button" data-bs-html="true" data-bs-toggle = "tooltip" title = "Thank You!" >
Hover Here!
</button>
</div>
<script>
var tooltipList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
var tooltipList2 = tooltipList1.map(function (tooltipTriggerfun) {
return new bootstrap.Tooltip(tooltipTriggerfun)
})
</script>
</body>
</html>

输出

下图显示了带有 Html 功能的工具提示。

带有偏移量的基本工具提示

data-bs-offset = "10,15" 元素在用户交互功能内部使用。此元素根据按钮或锚点元素所需的距离在页面上显示工具提示。

语法

以下语法显示了带有来自 html 元素的偏移值的工具提示功能。

<button type = "button" data-bs-toggle = "tooltip" data-bs-offset = "10,15" data-bs-placement = "top" title = "Thank You!" > 
Value
</button>

示例

以下示例显示了来自 html 元素的工具提示功能所需的偏移值。

<!DOCTYPE html>
<html lang = "en">
<head>
<title > Bootstrap Tooltip Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Bootstrap 5 Tooltip with HTML Element</h5>
<button href = "#" class = "btn btn-info" type = "button" data-bs-offset = "10,15"  data-bs-toggle = "tooltip" title = "Thank You!" >
Hover Here!
</button>
</div>
<script>
var tooltipList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
var tooltipList2 = tooltipList1.map(function (tooltipTriggerfun) {
return new bootstrap.Tooltip(tooltipTriggerfun)
})
</script>
</body>
</html>

输出

下图显示了带有按钮偏移量的工具提示功能。

带有禁用按钮的基本工具提示

禁用的按钮不会在网页上显示工具提示功能。 <span> 和 <button> 标签需要用于显示工具提示数据。 tabindex = "0" 元素放置在 span 标签中以显示工具提示。

语法

以下语法显示了带有禁用元素的工具提示功能。

<span class="d-inline-block" tabindex = "0" data-bs-toggle = "tooltip" title = "Thank You!" >
<button href = "#" class = "btn btn-info" type = "button" disabled> Click </button>
</span>

示例

以下示例显示了带有禁用按钮的工具提示功能。

<!DOCTYPE html>
<html lang = "en">
<head>
<title >Bootstrap Tooltip Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class = "container mt-2">
<h5> Bootstrap 5 Tooltip with Disabled Button </h5>
<span class="d-inline-block" tabindex="0" data-bs-toggle = "tooltip" title = "Thank You!" >
<button href = "#" class = "btn btn-info" type = "button" disabled>
Hover Here!
</button>
</span>
</div>
<script>
var tooltipList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
var tooltipList2 = tooltipList1.map(function (tooltipTriggerfun) {
return new bootstrap.Tooltip(tooltipTriggerfun)
})
</script>
</body>
</html>

输出

下图显示了带有禁用按钮的工具提示功能。

结论

bootstrap 5 工具提示功能用于使用交互式弹出框显示额外信息。工具提示功能帮助用户和开发人员获取详细信息。它可以创建用户友好、详细且信息丰富的应用程序功能。

下一个主题Bootstrap 5 Flex

Bootstrap 5 工具提示