Tooltip 구성 요소

<div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">
  <div class="group relative inline-block">
    <button class="px-6 py-3 bg-white text-gray-900 rounded-lg shadow-md hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-indigo-500/50 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-indigo-400/50 transition-all duration-300 ease-in-out text-lg font-semibold uppercase tracking-wider">
      Hover for Item Info
    </button>

    <div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 ease-in-out absolute z-50 mt-2 left-1/2 -translate-x-1/2 w-80 lg:w-96 p-4 rounded-lg shadow-2xl bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700 dark:from-gray-700 dark:to-gray-600 dark:border-gray-500 transform scale-95 group-hover:scale-100 origin-top">
      <div class="flex items-center space-x-4 mb-4 border-b border-gray-700 dark:border-gray-500 pb-3">
        <img src="https://picsum.photos/80/80?random=1" alt="Item Icon" class="w-16 h-16 rounded-lg object-cover border-2 border-indigo-500 shadow-lg">
        <div>
          <h3 class="text-xl font-bold text-indigo-400 mb-1 leading-tight">Legendary Sword of Awesomeness</h3>
          <p class="text-sm text-gray-300 dark:text-gray-200">One-Handed Sword</p>
        </div>
      </div>

      <div class="space-y-3 mb-4 text-gray-200 dark:text-gray-100">
        <p class="text-base leading-snug">A blade of untold power, forged in the heart of a dying star. Grants immense strength to its wielder.</p>
        <ul class="list-none p-0 m-0 space-y-1">
          <li class="flex items-center text-green-400 text-sm">
            <svg class="w-4 h-4 mr-2 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            +150 Attack Damage
          </li>
          <li class="flex items-center text-green-400 text-sm">
            <svg class="w-4 h-4 mr-2 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            +50 Critical Chance
          </li>
          <li class="flex items-center text-blue-400 text-sm">
            <svg class="w-4 h-4 mr-2 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v2.102a4 4 0 00.865 3.197 6 6 0 01-1.397 1.258l-5.717 5.717a1 1 0 00-.342.827l-.027.674a3 3 0 00.814 2.842 3 3 0 002.842.814l.674-.027a1 1 0 00.827-.342L15.953 13.1a1 1 0 000-1.414l-4.95-4.95a1 1 0 00-1.414 0l-.636.636a1 1 0 10-1.414 1.414l.115-.115L12 14.066V7.834a1 1 0 01.077-.426l.462-1.042A1 1 0 0113 5.485V2a1 1 0 01.3-.707A1 1 0 0114 1z" clip-rule="evenodd"></path></svg>
            25% Chance for Double Strike
          </li>
        </ul>
      </div>
      
      <div class="flex justify-between items-center text-sm pt-3 border-t border-gray-700 dark:border-gray-500">
        <div class="text-gray-400 dark:text-gray-300">Equip: Warrior, Paladin</div>
        <div class="text-yellow-400 font-bold">Value: 5000 Gold</div>
      </div>

      <div class="absolute -top-3 left-1/2 -ml-2 w-0 h-0 border-l-[10px] border-l-transparent border-r-[10px] border-r-transparent border-b-[10px] border-b-gray-800 dark:border-b-gray-600"></div>
    </div>
  </div>
</div>