Tooltip Colors

                    <div class="p-8 flex flex-wrap justify-center items-center gap-4">
  <!-- Default Tooltip (Gray) -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors">
      Default
    </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-2 py-1 rounded 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-800">
      Default tooltip
    </div>
  </div>
  
  <!-- Primary Tooltip (Blue) -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
      Primary
    </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-blue-600 text-white text-sm px-2 py-1 rounded 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-blue-600">
      Primary tooltip
    </div>
  </div>
  
  <!-- Success Tooltip (Green) -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors">
      Success
    </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-green-600 text-white text-sm px-2 py-1 rounded 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-green-600">
      Success tooltip
    </div>
  </div>
  
  <!-- Warning Tooltip (Yellow) -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600 transition-colors">
      Warning
    </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-yellow-500 text-white text-sm px-2 py-1 rounded 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-yellow-500">
      Warning tooltip
    </div>
  </div>
  
  <!-- Error Tooltip (Red) -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors">
      Error
    </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-red-600 text-white text-sm px-2 py-1 rounded 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-red-600">
      Error tooltip
    </div>
  </div>
  
  <!-- Info Tooltip (Cyan) -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-cyan-600 text-white rounded hover:bg-cyan-700 transition-colors">
      Info
    </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-cyan-600 text-white text-sm px-2 py-1 rounded 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-cyan-600">
      Info tooltip
    </div>
  </div>
</div>