jquery之tooltip.js popper.js 使用示例

由于不太精通 javascript，我不明白 tooltip.js根本没有文档。为什么不包括像我这样的人的例子？

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

1. 我将 tooltip.js 添加到 webpack(通过 npm 安装)
2. 然后我从“tooltip.js”导入工具提示；
3. 然后呢？

我尝试使用 boostrap 中的代码:

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

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

$(...).tooltip is not a function

their example page 上有一些示例代码这并没有真正帮助:

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 is not a function

请您参考如下方法:

尝试使用以下代码:

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>