tooltip.js popper.js使用示例

Question

由于我对javascript不太精通，所以我根本不理解tooltip.js文档。为什么不包括一个我这样的人的例子呢？

我要安装这个库才能正常工作吗？

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

我尝试使用来自靴带的代码：

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

但是我实际上并没有使用引导，所以错误是: TypeError：

$(.).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

根据文档，您必须调用如下工具提示

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

因此，如果您希望使用数据切换=“工具提示”调用工具提示js来生成所有元素，您可以这样做：

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

Answer 2

尝试使用以下代码：

​

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>

​