@props(['location'=>'center','vertical'=>'top'])
<div x-data="{ tooltip: false }">
    <x-heroicon-o-information-circle class="h-5 w-5 text-gray-500 z-10" x-on:mouseover="tooltip = true" x-on:mouseleave="tooltip = false" />
    <div class="relative" x-cloak x-show.transition.origin.top="tooltip">
        <div class="absolute block transform
        md:left-0 md:-top-4 md:-translate-x-1/2
        @if($vertical=='bottom')
            translate-y-full -bottom-2 sm:-translate-y-full sm:-top-4 sm:bottom-auto
        @else
            -translate-y-full -top-4
        @endif
        @if($location=='center')
            left-0  -translate-x-1/2
        @elseif($location=='right')
            right-0 translate-x-2/3
        @else
            right-0 -translate-x
        @endif
        z-10 min-w-72 w-auto p-3 -mt-2 text-xs leading-tight font-light text-slate-900  bg-white border border-slate-100 rounded shadow">
            {{ $slot }}
        </div>
    </div>
</div>