Simple Tooltip using AlpineJS and Tailwind

Today, I had a need for a simple tooltip in my application. After looking at tooltip options, I decided I really didn’t want to include several libraries to accomplish this simple need. Since I was already using AlpineJS and TailwindCSS, I decided to just roll a simple one.

Run the code here:

https://codepen.io/bdelamatre/pen/LYxmMRJ

Tooltip on click:

<div x-data="{ tooltip: false }">
    <button x-on:click="tooltip = !tooltip">
        Click Me!
    </button>
    <div x-show="tooltip" class="z-50 absolute bg-white border-graphite border-2 rounded p-4 mt-1">
      My Text
    </div>
</div>

Tooltip on hover

<div x-data="{ tooltip: false }">
    <button x-on:mouseenter="tooltip = true" x-on:mouseleave="tooltip = false">
        Hover Over Me!
    </button>
    <div x-show="tooltip" class="z-50 absolute bg-white border-graphite border-2 rounded p-4 mt-1">
      My Text
    </div>
</div>

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>