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个月前赞一波!
相关文章
文章评论
评论问答