Componente de información sobre herramientas

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative group">
    <button class="px-6 py-3 bg-gray-800 text-white rounded-lg shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-purple-400 dark:focus:ring-offset-gray-900 transition-colors duration-200">
      Hover for Info
    </button>
    <div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 w-48 p-3 bg-gray-900 text-white text-sm rounded-lg shadow-lg opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto z-10 dark:bg-gray-100 dark:text-gray-900 dark:border dark:border-gray-200
                before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-8 before:border-t-gray-900 before:border-x-transparent before:border-b-transparent dark:before:border-t-gray-100">
      <p class="font-semibold mb-1 text-purple-400 dark:text-purple-600">Event Details</p>
      <p>This is important information about the conference event.</p>
      <div class="absolute -bottom-1 left-1/2 -ml-2 w-4 h-4 bg-gray-900 dark:bg-gray-100 transform rotate-45 pointer-events-none origin-bottom-left"></div>
    </div>
  </div>
</div>