Bootstrap 5 工具提示在 Laravel 9.x 应用程序中不起作用

Question

我最近升级了 Laravel 应用程序以使用 Bootstrap 5，但无法让 Bootstrap 的工具提示正常工作。我的应用程序正在运行 Laravel Framework 9.52.16 以及 Bootstrap 5.3.3 和 popper.js 1.16.1。

虽然默认的 HTML 工具提示工作正常，但我正在尝试使用 Bootstrap 5 的工具提示来增强功能和定位。然而，无论我如何尝试实例化它们，它们似乎都没有出现。我的控制台中没有错误，只是没有出现工具提示。

我的网站使用一个结构，其中有一个

layout.blade.php

文件，该文件加载我的所有依赖项并为网站提供基本结构。然后，它使用一系列

@include

或

@yield

语句来包含适合用户在任何给定时间所在页面的内容。

我尝试将引导实例化代码包含在

<script>

底部的

layout.blade.php

标签中：

/** Instantiate all BS5 Tooltips */
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
})

我尝试将其放入我的

$(function() {});

标签以及

$(document).ready(function(){});

中，但都没有解决问题。我还尝试将

defer

添加到脚本标记，但这也没有解决问题。我从相同位置的 codepen 复制了其他一些不同的速记解决方案，但它们也不起作用。最后，我还尝试将上述代码直接包含在最低级别页面（具有工具提示的刀片文件）上，但这也没有解决问题。

如果我在 return 语句之前添加警报，我可以看到代码标识了每个工具提示，但当我将鼠标悬停在其容器上时，工具提示不会出现。

这是我的 HTML 中的示例工具提示：

<i class="fas fa-question-circle help-icon" data-bs-toggle="tooltip" data-bs-placement="top" container="body" aria-label="Sample Text" data-bs-original-title="Sample Text"></i>

我是一名业余开发人员，我花了几天时间研究如何正确使用 Mix 来使用 BS5 的所有新功能，结果却在工具提示上遇到了障碍。任何帮助将不胜感激！

Answer 1

在参考了朋友的另一个laravel项目后，我在这里找到了这个问题。问题实际上是我在标签中的函数内启动工具提示。将初始化代码放在 $(function() {}); 内或 $(document).ready(function(){});导致工具提示不起作用。初始化代码必须放置在内部且周围没有任何函数（基本上就在我的标签下方）才能工作。

Answer 2

您可以向

title

标签添加

i

属性以显示工具提示消息。

<i class="fas fa-question-circle help-icon" data-bs-toggle="tooltip" data-bs-placement="top" container="body" aria-label="Sample Text" title="Your Tooltip Message"></i>

或者，您可以将工具提示属性放置在锚标记内，如下所示：

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Your Tooltip Message">
    <i class="fas fa-question-circle help-icon"></i>
</a>

在这两种情况下，请将“您的工具提示消息”替换为您想要在工具提示中显示的消息。