Hey there. Here is a quick tutorial to easily create tooltips using Tippy.js.

Add the main cdn to your scripts section:

<script src="https://unpkg.com/@popperjs/core@2"</script>
<script src="https://unpkg.com/tippy.js@6"></script>

Once Tippy is already loaded, then we'll execute this script:

<script>
    tippy('.js-tooltip')
</script>

This will create a Tooltip on all classes called js-tooltip.

So, we've created a generic class to easily create tooltips. Let's continue with the tooltip text.

We can use js-tooltip on every tag, and to set the tooltip we only have to write a special attribute:

data-tippy-content="Hello world"

Let's try with div and buttons

<button class="js-tooltip" data-tippy-content="Hello button">
  Hello, hover me
</button>

<span class="js-tooltip" data-tippy-content="Hello world">
  Hello, hover me
</span>

Finally, take a look at this Codepen and try it!

https://codepen.io/mgarcia96/pen/dyWwPvB

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Thank you!

Marc