A Simple Guide to Create a Tooltip Button in JavaScript: Tippy.js for Beginners

Tippy.js a smart javascript library for creating a tooltip button, which is very useful to web development. In this tutorial, we will implement this tooktip button with some steps using Tippy.js.

create tooltip button using Tippy.js

View tooltip button demo

How to create a tooltip button using Tippy.js library?

1. Import popper.js and tippy.js

<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

2.Create a button

<button id="myButton_1">Button One</button>

3.Bind a tooltip on a button

<script type="text/javascript">
tippy('#myButton_1', {
  content: "This is a default tooltip button!"
});
</script>

How to use html content as the tooltip?

1.Create a button

<button id="myButton_2">Button Two</button>

2.Use html content as the tooltip

<script type="text/javascript">
tippy('#myButton_2', {
  content: "<font style='color:#ff6600;'>Tooltip button with html content!</font>",
  allowHTML: true
});
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *