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.
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>
