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>