<div x-data="{ show: false }" class="relative inline-block">
    <button @mouseenter="show = true" @mouseleave="show = false" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded">
        Hover me
    </button>
    <div x-show="show" x-cloak class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 dark:bg-gray-700 text-white text-sm rounded whitespace-nowrap">
        This is a tooltip
        <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
    </div>
</div>