Tooltip Custom

                    <div class="p-8 flex flex-wrap justify-center items-center gap-6">
  <!-- Outlined Tooltip -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-gray-100 text-gray-800 border border-gray-300 rounded hover:bg-gray-200 transition-colors">
      Outlined
    </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-1 bg-white text-gray-800 text-sm px-2 py-1 rounded border border-gray-200 shadow-sm whitespace-nowrap before:content-[''] before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-white before:z-10 after:content-[''] after:absolute after:left-1/2 after:top-full after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-gray-200">
      Outlined tooltip style
    </div>
  </div>
  
  <!-- Gradient Background Tooltip -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded hover:from-purple-600 hover:to-pink-600 transition-colors">
      Gradient
    </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-1 bg-gradient-to-r from-purple-500 to-pink-500 text-white text-sm px-3 py-1.5 rounded whitespace-nowrap shadow-lg before:content-[''] before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-pink-500">
      Gradient background tooltip
    </div>
  </div>
  
  <!-- Rounded with Shadow Tooltip -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-colors">
      Rounded
    </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-1 bg-gray-800 text-white text-sm px-4 py-2 rounded-full shadow-xl whitespace-nowrap">
      Rounded tooltip with shadow
    </div>
  </div>
  
  <!-- Glass Effect Tooltip -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-30 text-white rounded-lg shadow-sm hover:bg-opacity-30 transition-colors" style="background-color: rgba(255, 255, 255, 0.1);">
      Glass
    </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-1 bg-white bg-opacity-20 backdrop-blur-md text-white text-sm px-4 py-2 rounded-lg border border-white border-opacity-20 shadow whitespace-nowrap before:content-[''] before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-white/20">
      Glassmorphism tooltip effect
    </div>
  </div>
  
  <!-- Dark Mode Tooltip -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-900 transition-colors">
      Dark Mode
    </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-1 bg-gray-900 text-gray-100 text-sm px-3 py-1.5 rounded border border-gray-700 whitespace-nowrap before:content-[''] before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-gray-900">
      Dark mode tooltip
    </div>
  </div>
</div>