Tooltip Responsive

                    <div class="p-8">
  <div class="mx-auto max-w-xl">
    <h2 class="text-lg font-semibold text-gray-800 mb-4">Responsive Tooltips</h2>
    
    <!-- Only visible on small screens -->
    <div class="flex justify-center mb-6">
      <div class="relative inline-block group">
        <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
          Small Screen Tooltip
        </button>
        <div class="absolute z-10 invisible sm:hidden 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">
          Only visible on small screens
        </div>
      </div>
    </div>
    
    <!-- Only visible on medium and larger screens -->
    <div class="flex justify-center mb-6">
      <div class="relative inline-block group">
        <button class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 transition-colors">
          Medium+ Screen Tooltip
        </button>
        <div class="absolute z-10 invisible hidden md:block 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">
          Only visible on medium screens and larger
        </div>
      </div>
    </div>
    
    <!-- Different content on different screen sizes -->
    <div class="flex justify-center mb-6">
      <div class="relative inline-block group">
        <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors">
          Adaptive Content
        </button>
        <!-- Small screen tooltip -->
        <div class="absolute z-10 invisible md:hidden 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">
          Compact info
        </div>
        <!-- Medium+ screen tooltip -->
        <div class="absolute z-10 invisible hidden md:block 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">
          This is a more detailed explanation for larger screens
        </div>
      </div>
    </div>
    
    <!-- Responsive position -->
    <div class="flex justify-center">
      <div class="relative inline-block group">
        <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors">
          Responsive Position
        </button>
        <!-- Top on small, right on medium+ -->
        <div class="absolute z-10 invisible md:hidden 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">
          Top tooltip (small screens)
        </div>
        <!-- Right tooltip for md+ -->
        <div class="absolute z-10 invisible hidden md:block group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity left-full top-1/2 transform -translate-y-1/2 ml-1 bg-gray-800 text-white text-sm px-2 py-1 rounded whitespace-nowrap before:content-[''] before:absolute before:right-full before:top-1/2 before:-translate-y-1/2 before:border-4 before:border-transparent before:border-r-gray-800">
          Right tooltip (medium+ screens)
        </div>
      </div>
    </div>
  </div>
</div>