Tooltips : tailwindcss + alpinejs

tooltips.blade.php

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