tooltip.js popper.js usage example

Question

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. I add tooltip.js to webpack (installed via npm)
2. Then I do import tooltip from 'tooltip.js';
3. Then what?

I tried to use the code from boostrap :

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

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

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

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

I imagine something like this:

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

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

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

Answer 1

Try with below code:

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

Based on documentation you must call tooltips like this

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

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',
    });
  });
});