Search code examples
javascripttippyjs

Issue with Tippy.js content

I took this example straight from tippy.js documentation:

<button id="myButton">My Button</button>

tippy('#myButton', {
    content: "I'm a Tippy tooltip!",
});

I can't seem to make the content option work; but if I put a title attribute in the button element, the tippy tooltip appears!

Solution

  • title attribute on button is the default behaviour of the HTML button element.

    Did you include the script? I tried below way(as mentioned in the docs) and it worked without any issues.

    <button id="myButton">My button</button>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
   // With the above scripts loaded, you can call `tippy()` with a CSS
   // selector and a `content` prop:
   tippy('#myButton', {
     content: 'My tooltip!',
   });
</script>

    Demo