引导工具提示未在徽章上触发

问题描述 投票：0回答：2

我有一个 Laravel 应用程序，我试图在徽章上触发 Bootstrap 工具提示，但在控制台中收到以下错误：

Uncaught ReferenceError: Tooltip is not defined

我正在按照 Bootstrap 5 

文档
在 resources/js/bootstrap.js 中导入 Popper 和 JavaScript 组件：

import Modal from "bootstrap/js/dist/modal.js";
import Collapse from "bootstrap/js/dist/collapse.js";
import Tooltip from "bootstrap/js/dist/tooltip.js";
import Popper from "@popperjs/core/dist/umd/popper";
  
try {
    window.Popper = Popper;
    /* window.Popper = require("@popperjs/core");  # This doesn't work either */

    window.$ = window.jQuery = require("jquery");
    require("bootstrap");
} catch (e) {}

我使用 resources/js/main.js 中的 

documentation
中的以下代码以及 DOMContentLoaded 事件侦听器来初始化工具提示：

document.addEventListener("DOMContentLoaded", function () { var tooltipTriggerList = [].slice.call( document.querySelectorAll('[data-bs-toggle="tooltip"]') ）； var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 返回新的工具提示（tooltipTriggerEl）； }); });

我已经运行了 

npm run dev
并在 
webpack.mix.js
中有以下内容：

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .postCss('resources/css/app.css', 'public/css')
    .sourceMaps();

最后我引用这两个文件并在我的标记中添加 HTML：

<head>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="{{ asset('js/main.js') }}" defer></script>
</head>

<body>

...

<div class="text-center mt-3 mb-3 mb-lg-0">
<span class="badge" data-bs-toggle="tooltip" data-bs-placement="bottom" title="My tooltip"><i class="fas fa-lock"></i> SECURE PAYMENT</span>
</div>

</body>

所以我已经尝试了目前能想到的几乎所有方法，但还是不知所措。我错过了什么？

javascript laravel twitter-bootstrap build twitter-bootstrap-tooltip
2个回答
2
投票

在回过头来并花了几个小时后，我终于成功解决了这个问题。有一些问题导致我的 Bootstrap 工具提示无法呈现，现在我已经解决了这些问题，工具提示将按预期呈现。

1.添加 
title
属性

正如 Bootstrap 5 的文档提到的以及 Gleb 指出的那样，Bootstrap 工具提示至少需要 HTML 

title
属性中的一些数据。浏览器使用此 title 属性来呈现默认工具提示，然后 Bootstrap 会挂钩该工具提示以呈现更好看的工具提示 - 因此，如果没有此属性，Bootstrap 根本无法呈现任何工具提示。

2.修改 Bootstrap 导入和要求

要修复 

Uncaught ReferenceError: Tooltip is not defined
，请从 Tooltips 文档 中粘贴初始化 JavaScript，保持不变：

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

然后在您导入 Bootstrap Javascript 组件的文件中，例如 

app.js
或在我的例子中 
bootstrap.js
，更改 
try
块内的这一行：

require("bootstrap")

以下内容：

window.bootstrap = require("bootstrap");

这应该会产生如下所示的 

app.js
/
bootstrap.js
：

window._ = require("lodash");

import Popper from "@popperjs/core/dist/umd/popper"; 
// Replace these with the individual JavaScript components 
// you need or, if optimising size is not a priority for you, 
// simply replace them all with import "bootstrap"; 
import "bootstrap/js/dist/button.js"; /* need or, 
import "bootstrap/js/dist/carousel.js";
import "bootstrap/js/dist/collapse.js";
import Modal from "bootstrap/js/dist/modal.js";
import Tooltip from "bootstrap/js/dist/tooltip.js";
   
try {
    window.Popper = Popper;
    window.$ = window.jQuery = require("jquery");
    window.bootstrap = require("bootstrap"); // Modify this line
} catch (e) {}

最后，在构建过程中运行 

npm run dev
- 现在应该清除错误，并且 Bootstrap 工具提示应该按预期呈现。

1
投票

您还需要添加带有工具提示文本的 

title
属性。

https://getbootstrap.com/docs/5.1/components/tooltips/#markup

工具提示所需的标记只是您希望拥有工具提示的 HTML 元素上的数据属性和标题。

<div class="text-center mt-3 mb-3 mb-lg-0">
  <span title="Some tooltip text!" class="badge bg-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom"><i class="fas fa-lock"></i> SECURE PAYMENT</span>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.