工具提示.js波普尔.js使用示例

Question

由于不太精通javascript，我根本不了解工具提示.js文档。为什么不包括像我这样的人的例子？

我必须安装此库才能正常工作吗？

1. 我tooltip.js添加到webpack(通过 npm 安装(
2. 那我就import tooltip from 'tooltip.js';
3. 然后呢？

我尝试使用来自 boostrap 的代码：

<p data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</p>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})

但我实际上并没有使用引导程序，所以错误是：类型错误：

$(...(。工具提示不是函数

他们的示例页面上有一些示例代码并没有真正的帮助：

new Tooltip(referenceElement, {
placement: 'top', // or bottom, left, right, and variations
title: "Top"
});

什么是referenceElement？是我想触发的元素的类吗？

我想象的是这样的：

<p title="xyz" data-toggle="tooltip">hello</p>

然后像这样编写JavaScript???

new Tooltip('[data-toggle="tooltip"]', {
placement: 'top',
trigger: 'hover'
});

这当然是行不通的。它返回错误：

TypeError： reference.addEventListener 不是函数

如何？为什么？小码写：https://codepen.io/Sepp/pen/ZowqdM

Answer 1

尝试使用以下代码：

document.addEventListener('DOMContentLoaded',function(){
var trigger = document.getElementsByClassName("is-success")[0];
var instance = new Tooltip(trigger,{
title: trigger.getAttribute('data-tooltip'),
trigger: "hover",
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://unpkg.com/tooltip.js"></script>
<button class="button is-success" data-tooltip="Click Here">Hover Me</button>

Answer 2

根据文档，您必须调用这样的工具提示

new Tooltip(referenceElement, {
placement: 'top', // or bottom, left, right, and variations
title: "Top"
});

所以，如果你想用 [data-toggle="tooltip"] 调用工具提示 js 来制作所有元素，你可以这样做：

$( document ).ready(function() {
$( '[data-toggle="tooltip"]' ).each(function() {
new Tooltip($(this), {
placement: 'top',
});
});
});