Tooltip Sizes

                    <div class="p-8 flex flex-wrap justify-center items-center gap-6">
  <!-- Small Tooltip -->
  <div class="relative inline-block group">
    <button class="px-2 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors">
      Small
    </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-xs px-1.5 py-0.5 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">
      Small tooltip
    </div>
  </div>
  
  <!-- Medium Tooltip (Default) -->
  <div class="relative inline-block group">
    <button class="px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors">
      Medium
    </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">
      Medium tooltip
    </div>
  </div>
  
  <!-- Large Tooltip -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
      Large
    </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-base px-3 py-1.5 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">
      Large tooltip
    </div>
  </div>
  
  <!-- Extra Large Tooltip -->
  <div class="relative inline-block group">
    <button class="px-5 py-2.5 bg-blue-600 text-white text-lg rounded hover:bg-blue-700 transition-colors">
      Extra Large
    </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-lg px-4 py-2 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">
      Extra large tooltip
    </div>
  </div>
</div>