tooltip.js popper.js用法示例 [英] tooltip.js popper.js usage example

问题描述

由于不是非常精通JavaScript，所以我不理解 tooltip.js 文档.为什么不为像我这样的人提供榜样?

As not very proficient in javascript I don't understand the tooltip.js documentation at all. Why do the not include an example for people like me?

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

Ho do I have to install this library in order to work correctly?

1. 我将tooltip.js添加到webpack(通过npm安装)
2. 然后我做import tooltip from 'tooltip.js';
3. 那又是什么?

1. I add tooltip.js to webpack (installed via npm)
2. Then I do import tooltip from 'tooltip.js';
3. Then what?

我试图使用 boostrap 的代码:

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

但是我实际上并不使用引导程序，因此错误是:TypeError:

But I don't actually use bootstrap so the error is: TypeError:

$(...).tooltip不是函数

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

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

There is some example code on their example page which doesn't really help:

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

什么是referenceElement?是我希望触发的元素类别吗?

What is referenceElement ? Is it the class of the element I whish to trigger?

我想像这样:

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

然后像这样编写javascript?

And then write the javascript somewhat like this???

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

那当然是行不通的.它返回错误:

That certainly does not work. It returns the error:

TypeError:reference.addEventListener不是函数

TypeError: reference.addEventListener is not a function

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

How? Why? A little Codepen: https://codepen.io/Sepp/pen/ZowqdM

推荐答案

基于文档，您必须调用这样的工具提示

Based on documentation you must call tooltips like this

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

因此，如果要使用[data-toggle ="tooltip"]调用tooltips js来制作所有元素，则可以这样:

so, if you want make all element with [data-toggle="tooltip"] call tooltips js you can do like this:

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

这篇关于tooltip.js popper.js用法示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！