Bootstrap Laravel 9 $(...).工具提示不是函数

b1payxdu  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(3)|浏览(220)

我使用的是全新安装的Laravel Framework 9.43.0。
Bootstrap和jQuery运行良好,除了voor tooltip()。它给我这个错误:
未捕获的类型错误:$(...).tooltip不是函数
我尝试了很多不同的JS库导入组合,这是我目前的bootstrap.js:

import _ from 'lodash';
window._ = _;

import $ from 'jquery';
window.$ = window.jQuery = $;

import * as popper from '@popperjs/core';
window.Popper = popper;

import 'bootstrap';

$('body').tooltip({
    selector: '[data-bs-toggle="tooltip"]',
});
依赖项
  • jQuery版本:3.6.2
  • 弹出窗口.js:2.11.6
  • Bootstrap :5.2.3

我怎样才能使tooltip()工作?

f0brbegy

f0brbegy1#

我相信在Bootstrap 5中,tooltip()方法已经被移到了jQuery.fn.tooltip名称空间中,所以您需要将其用作$.fn.tooltip(),而不仅仅是$.tooltip()
尝试使用bs.tooltip事件在Bootstrap 5中创建工具提示。
以下示例说明如何使用bs.tooltip事件在代码中创建工具提示:

$('body').on('bs.tooltip', '[data-bs-toggle="tooltip"]', (event) => {
    $(event.target).tooltip({
        title: "Tooltip content goes here",
    });
});

在本例中,我们使用on()方法为body元素上的bs.tooltip事件绑定一个事件监听器,然后,当事件被触发时,我们使用tooltip()方法创建工具提示。

50pmv0ei

50pmv0ei2#

帮你自己一个忙,现在你正处于项目的开始阶段,完全摆脱jQuery吧。Bootstrap 5不再需要jQuery作为依赖项,公平地说,作为一个开发人员,你也不再需要它了,几乎jQuery提供的任何东西都可以用类似数量的纯JavaScript代码完成(例如$('.myclass') == document.querySelectorAll('.myclass'))。这使得您的代码更具可移植性,并节省了几个页面加载周期。
使用Bootstrap 5文档,有一个关于如何加载工具提示的示例:
https://getbootstrap.com/docs/5.0/components/tooltips/#example-enable-tooltips-everywhere

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

换句话说:将data-bs-toggle="tooltip"属性附加到您选择的元素。

kg7wmglp

kg7wmglp3#

请使用以下命令:

(() => {
    // Initialize all tooltips on a page.

    [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        ?.map(function (tooltipTriggerEl) {
            return new window.Bootstrap.Tooltip(tooltipTriggerEl);
        });
})();
  • 参考编号:*

https://getbootstrap.com/docs/5.0/components/tooltips/#example-enable-tooltips-everywhere
此外,应改为:

import 'bootstrap';


使用此命令:

import * as Bootstrap from "bootstrap";
window.Bootstrap = Bootstrap;

相关问题