Tooltip Content

                    <div class="p-8 flex flex-wrap justify-center items-center gap-8">
  <!-- Tooltip with HTML Content -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
      User Profile
    </button>
    <div class="absolute z-10 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity left-1/2 transform -translate-x-1/2 -translate-y-full top-0 mb-2 w-64 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
      <div class="flex items-center p-3 bg-gray-50 border-b">
        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-lg">
          JD
        </div>
        <div class="ml-3">
          <div class="font-medium text-gray-900">John Doe</div>
          <div class="text-xs text-gray-500">Online</div>
        </div>
      </div>
      <div class="p-3 text-sm text-gray-600">
        <p>Front-end Developer</p>
        <p class="mt-1 text-xs">Member since Jan 2023</p>
      </div>
    </div>
  </div>
  
  <!-- Tooltip with Icons -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors">
      Help
    </button>
    <div class="absolute z-10 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity left-1/2 transform -translate-x-1/2 -translate-y-full top-0 mb-2 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden w-48">
      <div class="p-3 bg-green-50 border-b text-center text-green-600">
        <svg class="w-6 h-6 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div class="mt-1 font-medium">Need Help?</div>
      </div>
      <div class="p-3 text-xs text-gray-600">
        <ul class="space-y-1">
          <li class="flex items-center">
            <span class="w-4 h-4 mr-1 flex-shrink-0 text-green-500">✓</span>
            <span>Check documentation</span>
          </li>
          <li class="flex items-center">
            <span class="w-4 h-4 mr-1 flex-shrink-0 text-green-500">✓</span>
            <span>Contact support</span>
          </li>
          <li class="flex items-center">
            <span class="w-4 h-4 mr-1 flex-shrink-0 text-green-500">✓</span>
            <span>Visit our help center</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>