Componente de descripción emergente esqueuomórfico

<div class="relative inline-block">
    <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded shadow-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
        Hover me
    </button>
    <div class="absolute left-1/2 transform -translate-x-1/2 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-xl opacity-0 transition-opacity duration-300 tooltip">
        <div class="flex items-center p-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-sm font-semibold text-gray-800 dark:text-gray-300">John Doe</span>
        </div>
        <div class="p-2">
            <p class="text-xs text-gray-600 dark:text-gray-400">
                This is a tooltip message. It provides additional information about the button.
            </p>
        </div>
    </div>
</div>

<style>
    /* Tooltip visibility on hover */
    .relative:hover .tooltip {
        opacity: 1;
    }

    /* Skeuomorphic style - shadow and border */
    .tooltip {
        box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
        border-radius: 0.5rem;
    }
</style>