雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

Bootstrap Popovers Tooltips不工作

2024-07-09 38

使用 popover 插件时需要注意的事项:

Popovers 依赖第三方库 Popper 进行定位。 您必须在 bootstrap.js 之前包含 popper.min.js,或者使用包含 Popper 的 bootstrap.bundle.min.js。

弹出窗口需要弹出窗口插件作为依赖项。

出于性能原因,弹出窗口是可选的,因此您必须自己初始化它们。

零长度标题和内容值永远不会显示弹出窗口。

指定容器:“body”以避免更复杂的组件(例如我们的输入组、按钮组等)中的渲染问题。

在隐藏元素上触发弹出窗口将不起作用。

.disabled 或禁用元素的弹出窗口必须在包装元素上触发。

当从跨多行的锚点触发时,弹出窗口将在锚点的整体宽度之间居中。 在您的 <a> 上使用 .text-nowrap 可以避免这种行为。

在从 DOM 中删除相应的元素之前,必须隐藏弹出窗口。

弹出窗口可以通过影子 DOM 内的元素来触发。

如果没有弹出窗口的话请注意,必须自己初始化他们。

如上所述,必须先初始化弹出窗口,然后才能使用它们。 初始化页面上所有弹出窗口的一种方法是通过其 data-bs-toggle 属性选择它们,如下所示:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
更新于:4个月前
赞一波!

文章评论

评论问答