如何解决工具提示和弹出框在 Bootstrap 5 中不起作用
我用 Bootstrap 5 创建了一个非常小的网站。
我使用“工具提示”和“弹出框”在页面底部创建了 2 个按钮,但它们不起作用,没有显示任何内容。
这是我的网站,位于页面底部:
这里是 HTML 代码:
<!doctype html>
<html lang="fr" class="h-100">
<head>
<link rel="manifest" href="/manifest.json">
<link rel="canonical" href="https://www.mathieulebert.fr/">
<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="position-relative d-flex flex-column bg-dark text-white text-center" data-bs-spy="scroll" data-target="#navbar" data-bs-offset="85" tabindex="0">
<button type="button" class="btn btn-secondary m-5" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary m-5" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Copié">
Popover on bottom
</button>
<script src="bootstrap.bundle.min.js"></script>
<script src="clipboard.min.js"></script>
<script src="pwa.js"></script>
<script src="feed.js"></script>
<script>
var clipboard = new ClipboardJS('.btn-clipboard');
clipboard.on('success',function (e) {
console.log(e);
});
clipboard.on('error',function (e) {
console.log(e);
});
</script>
</body>
</html>
解决方法
在当前的实现中,默认情况下不会运行在任何地方启用工具提示和弹出框的代码。你必须自己运行它,主要是因为 Bootstrap 试图对你的网站做出更少的假设并给你更多的控制权。这在未来可能会改变。
您在他们的文档中有一个关于如何enable tooltips everywhere的示例。
较短的版本:
[...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
.forEach(el => new bootstrap.Tooltip(el))
您在 popovers 文档页面上有一个关于如何enable popovers everywhere的示例。
较短的版本:
[...document.querySelectorAll('[data-bs-toggle="popover"]')]
.forEach(el => new bootstrap.Popover(el))
您必须在加载 Bootstrap 的 JS 之后运行此代码,例如bootstrap.bundle(.min).js
注意:与其他版本的 Bootstrap 不同,Bootstrap 的阅读文档在某种程度上是可选的,而 v5
并非如此。
很多假设都被摒弃了,很多事情都发生了变化,你获得了更多的自由。
为了确保这是它们在您的实施中不起作用的唯一原因,我在您的网站上运行了上述代码,结果如下:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。