@props(['text'])
{{--<div x-data="{ open: false }" class="relative inline-block">--}}
{{--    <button @click="open = !open" class="px-2 bg-gray-400 text-white rounded-full">i</button>--}}
{{--    <div--}}
{{--        x-show="open"--}}
{{--        x-transition--}}
{{--        @click.outside="open = false"--}}
{{--        class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-900 text-white text-sm rounded-lg shadow-lg w-64">--}}
{{--        {{ $text }}--}}
{{--        <div class="absolute top-full left-1/2 -translate-x-1/2 w-2 h-2 bg-gray-900 rotate-45"></div>--}}
{{--    </div>--}}
{{--</div>--}}
<div x-data="{ open: false }" class="relative inline-block">
    <button @click="open = !open" class="px-2 bg-gray-400 text-white rounded-full">i</button>
    <div
        x-show="open"
        x-transition
        @click.outside="open = false"
        class="absolute left-full top-1/2 -translate-y-1/2 ml-2 px-3 py-1 bg-gray-900 text-white text-sm rounded-lg shadow-lg w-64">
        {{ $text }}
        <!-- Strzałka -->
        <div class="absolute left-0 top-1/2 -translate-y-1/2 -ml-1 w-2 h-2 bg-gray-900 rotate-45"></div>
    </div>
</div>