时间戳

首页 > 解决方案 > tooltip.js popper.js 使用示例

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

问题描述

由于不是很精通 javascript，我根本不了解tooltip.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()
})

但我实际上并没有使用引导程序，所以错误是：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 不是函数

如何？为什么？一点 Codepen：https ://codepen.io/Sepp/pen/ZowqdM

标签： jquerypopper.js

解决方案

试试下面的代码：

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>

推荐阅读