Bootstrap5 提示框

简介: Bootstrap5 提示框是鼠标悬停时显示的小弹窗。通过在元素上添加 `data-bs-toggle="tooltip"` 和 `title` 属性来创建,并需在 JS 中调用 `tooltip()` 方法初始化。可使用 `data-bs-placement` 属性设置提示框显示位置(top、bottom、left、right)。

Bootstrap5 提示框
提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。

如何创建提示框
通过向元素添加 data-bs-toggle="tooltip" 来来创建提示框。

title 属性的内容为提示框显示的内容:


注意: 提示框要写在 JavaScript 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。

以下实例可以在文档的任何地方使用提示框:

实例
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})

尝试一下 »
指定提示框的位置
默认情况下提示框显示在元素上方。

可以使用 data-bs-placement 属性来设定提示框显示的方向: top, bottom, left 或 right:

实例
鼠标移动到我这
鼠标移动到我这
鼠标移动到我这
鼠标移动到我这

相关文章
|
17天前
Bootstrap5 下拉菜单6
使用 `.dropdown-item-text` 类可以在下拉菜单中添加纯文本项,
|
29天前
|
前端开发
Bootstrap5 按钮2
Bootstrap 5 提供了多种按钮样式和大小设置。通过 `btn-outline-*` 类可为按钮添加不同颜色的边框,并在鼠标悬停时产生突出效果。使用 `.btn-lg` 和 `.btn-sm` 类可以分别设置大号和小号按钮。
|
29天前
|
前端开发
Bootstrap5 按钮1
Bootstrap 5 提供了多种样式的按钮,包括基本、主要、次要、成功、信息、警告、危险、黑色、浅色和链接按钮。这些按钮样式可以通过添加不同的类应用于 `<a>`、`<button>` 或 `<input>` 元素。
|
9天前
|
JavaScript 前端开发
Bootstrap5 弹出框
Bootstrap5 弹出框是一种增强型提示工具,支持更多内容展示。通过在元素上添加 `data-bs-toggle="popover"` 并设置 `title` 和 `data-bs-content` 属性来创建。弹出框需通过 JavaScript 初始化,可自定义显示位置(top、bottom、left、right)。
|
29天前
Bootstrap5 信息提示框3
提示框动画使用 `.fade` 和 `.show` 类来实现关闭时的淡入淡出效果。示例代码:`<div class="alert alert-danger alert-dismissible fade show">`
|
28天前
Bootstrap5 按钮5
加载按钮示例:通过添加不同的类,可以创建带有加载动画的按钮,包括旋转加载和增长加载效果,同时支持禁用状态。
|
28天前
Bootstrap5 按钮4
按钮组件支持激活和禁用状态。使用 `.active` 类表示按钮处于激活状态,而 `disabled` 属性用于禁用按钮,使其不可点击。对于 `<a>` 标签,由于不支持 `disabled` 属性,可以通过添加 `.disabled` 类来实现相同效果。示例代码展示了如何应用这些类和属性。
|
29天前
Bootstrap5 按钮3
块级按钮通过 `.btn-block` 类实现,通常用于全宽布局。父级元素需添加 `.d-grid` 类。多个块级按钮间可使用 `.gap-*` 类设置间距。
Bootstrap5 信息提示框2
通过在提示框的 `div` 中添加 `.alert-dismissible` 类,并在关闭按钮上添加 `class="btn-close"` 和 `data-bs-dismiss="alert"`,可以实现提示框的关闭功能。
|
1月前
|
前端开发
Bootstrap5 信息提示框1
Bootstrap 5 提供了简单易用的信息提示框功能。通过 `.alert` 类结合不同的状态类(如 `.alert-success`、`.alert-info` 等),可以创建各种样式的信息提示框。此外,还可以在提示框中添加带有 `alert-link` 类的链接,使其颜色与提示框一致。例如: