工具提示Bootstrap 5.2/5.3在我的终端仍然不工作

p8ekf7hl 于 2023-06-20 发布在 Bootstrap

关注(0)|答案(1)|浏览(105)

我使用bootstrap 5.2构建html web，当我根据bootstrap文档中的说明使用工具提示时，它不起作用。
mozilla控制台中的错误响应：
未捕获的引用错误： Bootstrap 未定义tooltipList
代码引导javascript：

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

在html中调用

<link rel="stylesheet" href="/bootstrap-5.3.0/css/bootstrap.min.css?v=5.3.0">

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>

<script type="text/javascript" src="/js/jquery.min.js" defer=""></script>
<script type="text/javascript" src="/bootstrap-5.3.0/js/bootstrap.bundle.min.js" defer=""></script>
<script>
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>

已经尝试引导5.2和5.30仍然不工作，但popover工作正常。

twitter-bootstrap

来源：https://stackoverflow.com/questions/75868787/tooltip-bootstrap-5-2-5-3-still-not-working-in-my-end

1条答案

按热度按时间

9rygscc11#

您正在请求尚未加载的元素，因此，您应该等到DOM加载。我将使用DOMContentLoaded事件。
代码如下：

document.addEventListener("DOMContentLoaded", function (event) {
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    const tooltipList = [...tooltipTriggerList].map((tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl));
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" />

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

出于某种原因，在<script>上添加type="module"也可以工作。如果你在你的<script>中也使用了一些modules（2合1），并且你不需要DOMContentLoaded，我只推荐这样做。
下面是代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" />
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
<script type="module">
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    const tooltipList = [...tooltipTriggerList].map((tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl));
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

赞(0）回复(0）举报 2023-06-20

我来回答

工具提示Bootstrap 5.2/5.3在我的终端仍然不工作

1条答案

相关问题

热门标签

最新问答