Tooltip 구성 요소

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative flex items-center group">
    <button class="px-6 py-3 text-white transition-all duration-300 transform bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg shadow-2xl hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
                   dark:from-blue-700 dark:to-indigo-800
                   font-bold text-lg
                   relative overflow-hidden
                   before:absolute before:inset-0 before:bg-gradient-to-br before:from-white before:to-transparent before:opacity-0 before:transition-opacity before:duration-300
                   hover:before:opacity-20
                   after:absolute after:inset-0 after:border-t-2 after:border-l-2 after:border-white after:opacity-0 after:transition-opacity after:duration-300
                   hover:after:opacity-100
                   ">
      Hover for Dashboard Insights
    </button>
    
    <div class="absolute bottom-full mb-6 w-96 p-6
                bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900
                text-gray-900 dark:text-gray-100
                rounded-2xl shadow-skeuomorphic
                opacity-0 group-hover:opacity-100 transition-opacity duration-500
                transform translate-y-4 group-hover:-translate-y-0
                pointer-events-none group-hover:pointer-events-auto
                border-t-4 border-l-4 border-gray-300 dark:border-gray-600
                overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-white before:to-transparent before:opacity-10 before:rounded-2xl
                after:absolute after:bottom-0 after:left-1/2 after:-mb-4 after:-ml-2 after:w-0 after:h-0 after:border-solid after:border-8 after:border-transparent
                after:border-t-gray-400 dark:after:border-t-gray-900 after:drop-shadow-lg
                ">
      
      <div class="flex items-center space-x-4 mb-4 border-b pb-4 border-gray-300 dark:border-gray-600">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-lg">
        <div>
          <p class="font-bold text-lg text-indigo-700 dark:text-indigo-300">Analytics Summary</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Last updated: 2 minutes ago</p>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 mb-4">
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Total Sales:</p>
          <p class="font-bold text-xl text-green-600 dark:text-green-400">$12,450</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">New Users:</p>
          <p class="font-bold text-xl text-purple-600 dark:text-purple-400">320</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Bounce Rate:</p>
          <p class="font-bold text-xl text-red-600 dark:text-red-400">1.5%</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Avg. Session:</p>
          <p class="font-bold text-xl text-blue-600 dark:text-blue-400">8m 30s</p>
        </div>
      </div>

      <div class="flex justify-between items-center text-sm text-gray-700 dark:text-gray-300">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">View Full Report</a>
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path>
          </svg>
          <span>Real-time Data</span>
        </div>
      </div>

      <div class="absolute inset-0 border-r-4 border-b-4 border-gray-300 dark:border-gray-600 rounded-2xl pointer-events-none opacity-50"></div>
      <div class="absolute inset-0 bg-stone-300 dark:bg-stone-800 opacity-20 rounded-2xl filter blur-sm"></div>

    </div>
  </div>
</div>

<style>
  /* Custom shadow for Skeuomorphism */
  .shadow-skeuomorphic {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(255, 255, 255, 0.1);
  }
  .dark .shadow-skeuomorphic {
     box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7), -10px -10px 20px rgba(255, 255, 255, 0.05);
  }
  .shadow-inner-skeuomorphic {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
  }
  .dark .shadow-inner-skeuomorphic {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.05);
  }
  .group:hover .absolute.bottom-full:after {
    border-top-color: #A0AEC0; /* Light Gray */
  }
  .dark .group:hover .absolute.bottom-full:after {
    border-top-color: #4A5568; /* Dark Gray */
  }
</style>