即使根据 BS5 文档启用了工具提示,在 BS5 升级后也无法在 Laravel 应用程序中使用 Bootstrap 工具提示

问题描述 投票:0回答:1

我最近将我的 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 语句来包含适合用户在任何给定时间所在页面的内容。

最初我尝试将建议的引导实例化代码包含在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 到 script 标记,但这也没有解决问题。我从相同位置的 codepen 复制了其他一些不同的速记解决方案,但它们也不起作用。最后,我还尝试将上述代码直接包含在最低级别页面(实际上具有工具提示的刀片文件)中,但也没有解决问题。

如果我在 return 语句之前添加警报,我可以清楚地看到代码正在识别每个工具提示,但事实并没有改变,当我将鼠标悬停在其容器上时,工具提示不会出现。

这也是我的 HTML 中的一个示例工具提示(我只添加标题;popper 正在添加 data-bs-original-title 标签 - 所以我知道它正在做一些事情,只是不让工具提示出现。)

<i class="fas fa-question-circle help-icon" data-bs-toggle="tooltip" data-bs-placement="top" container="body" aria-label="This will place the character on the list of characters that can be drawn for gift art. This does not have any other functionality, but allow users looking for characters to draw to find your character easily." data-bs-original-title="This will place the character on the list of characters that can be drawn for gift art. This does not have any other functionality, but allow users looking for characters to draw to find your character easily."></i>

我是一名业余爱好开发者,对此我束手无策。我花了几天时间弄清楚如何正确使用 mix,这样我就可以使用 BS5 的所有新功能,但结果却碰上了所有东西工具提示上的这堵非常愚蠢的墙。如有任何帮助,我们将不胜感激!

user-interface bootstrap-5 laravel-9
1个回答
0
投票

只需添加“标题”即可显示工具提示消息

或 否则将工具提示属性放入锚标记内

© www.soinside.com 2019 - 2024. All rights reserved.