极简粉彩电商 Tooltip

<div class="relative flex items-center justify-center bg-gray-100 dark:bg-gray-900 min-h-screen p-6">

  <!-- Tooltip Container -->
  <div class="group relative flex">
    <button class="px-4 py-2 bg-pink-200 text-pink-800 rounded-md shadow-sm
                   hover:bg-pink-300 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-opacity-75
                   dark:bg-pink-700 dark:text-pink-100 dark:hover:bg-pink-600">
      Hover for Product Info
    </button>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full mb-2 hidden group-hover:block
                w-64 p-3 rounded-lg shadow-lg bg-white text-gray-800
                text-sm text-center
                dark:bg-gray-700 dark:text-gray-100
                transform -translate-x-1/2 left-1/2
                opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      <p class="font-semibold text-lg mb-2">Product Name</p>
      <p class="text-md mb-3">A brief description of the product and its key features for e-commerce.</p>
      <p class="text-pink-500 font-bold">Price: $49.99</p>

      <!-- Tooltip Arrow -->
      <div class="absolute top-full left-1/2 -ml-2 w-0 h-0 border-8 border-transparent
                  border-t-white dark:border-t-gray-700"></div>
    </div>
  </div>

</div>