Last active
April 9, 2021 14:36
-
-
Save lam0819/df44407f359ff19385b6a88b6b7945c7 to your computer and use it in GitHub Desktop.
Tooltips : tailwindcss + alpinejs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="relative flex items-center" x-data="{ tooltip : false}" > | |
<svg x-on:mouseover="tooltip = true" x-on:mouseleave="tooltip = false" class="cursor-pointer w-5 h-5 text-red-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> | |
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" /> | |
</svg> | |
<div x-cloak x-show.transition.origin.top="tooltip" class="absolute bottom-0 flex flex-col mb-3 w-auto min-w-max"> | |
<span class="relative z-10 p-2 text-xs leading-none text-white whitespace-no-wrap bg-red-primary shadow-lg rounded">{{ $text }}</span> | |
<svg class="w-6 h-6 -translate-y-2 -translate-x-1 z-10 text-red-primary transform fill-current stroke-current" width="8" height="8"> | |
<rect x="12" y="-10" width="8" height="8" transform="rotate(45)" /> | |
</svg> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment