我使用的是全新安装的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()工作?
3条答案
按热度按时间f0brbegy1#
我相信在Bootstrap 5中,
tooltip()
方法已经被移到了jQuery.fn.tooltip
名称空间中,所以您需要将其用作$.fn.tooltip(),而不仅仅是$.tooltip()
。尝试使用
bs.tooltip
事件在Bootstrap 5中创建工具提示。以下示例说明如何使用
bs.tooltip
事件在代码中创建工具提示:在本例中,我们使用
on()
方法为body元素上的bs.tooltip
事件绑定一个事件监听器,然后,当事件被触发时,我们使用tooltip()
方法创建工具提示。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
换句话说:将
data-bs-toggle="tooltip"
属性附加到您选择的元素。kg7wmglp3#
请使用以下命令:
https://getbootstrap.com/docs/5.0/components/tooltips/#example-enable-tooltips-everywhere
此外,应改为:
型
使用此命令: