Tailwind CSS Tooltip Components

                            <div class="p-8 flex flex-wrap justify-center items-center gap-6">
  <!-- Tooltip with Success Icon -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors flex items-center space-x-2">
      <span>Success</span>
      <svg class="w-4 h-4" 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="M5 13l4 4L19 7"></path>
      </svg>
    </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-3 py-1.5 rounded flex items-center space-x-2 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">
      <svg class="w-4 h-4 text-green-400" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span>Action completed successfully</span>
    </div>
  </div>
  
  <!-- Tooltip with Warning Icon -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600 transition-colors flex items-center space-x-2">
      <span>Warning</span>
      <svg class="w-4 h-4" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
      </svg>
    </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-3 py-1.5 rounded flex items-center space-x-2 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">
      <svg class="w-4 h-4 text-yellow-400" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
      </svg>
      <span>Please proceed with caution</span>
    </div>
  </div>
  
  <!-- Tooltip with Info Icon -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors flex items-center space-x-2">
      <span>Info</span>
      <svg class="w-4 h-4" 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>
    </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-3 py-1.5 rounded flex items-center space-x-2 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">
      <svg class="w-4 h-4 text-blue-400" 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>
      <span>Additional information available</span>
    </div>
  </div>
  
  <!-- Tooltip with Error Icon -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors flex items-center space-x-2">
      <span>Error</span>
      <svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </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-3 py-1.5 rounded flex items-center space-x-2 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">
      <svg class="w-4 h-4 text-red-400" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <span>An error has occurred</span>
    </div>
  </div>
</div>
                        

                            <div class="p-8 flex flex-wrap justify-center items-center gap-6">
  <!-- Default Hover 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">
      Hover Me
    </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">
      Appears on hover
    </div>
  </div>
  
  <!-- Always Visible Tooltip -->
  <div class="relative inline-block">
    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
      Always On
    </button>
    <div class="absolute z-10 visible opacity-100 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">
      Always visible
    </div>
  </div>
  
  <!-- Tooltip with Animation -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
      Animated
    </button>
    <div class="absolute z-10 invisible group-hover:visible opacity-0 group-hover:opacity-100 transform -translate-y-2 group-hover:-translate-y-full transition-all duration-300 left-1/2 -translate-x-1/2 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">
      Animated tooltip
    </div>
  </div>
  
  <!-- Click Trigger Tooltip (using JS) -->
  <div class="relative inline-block" id="click-tooltip-container">
    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors" id="click-tooltip-trigger">
      Click Me
    </button>
    <div class="absolute z-10 invisible opacity-0 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" id="click-tooltip">
      Appears on click
    </div>
  </div>
  
  <!-- Javascript to handle click tooltip -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const trigger = document.getElementById('click-tooltip-trigger');
      const tooltip = document.getElementById('click-tooltip');
      
      if (trigger && tooltip) {
        let isVisible = false;
        
        trigger.addEventListener('click', function() {
          isVisible = !isVisible;
          
          if (isVisible) {
            tooltip.classList.remove('invisible', 'opacity-0');
            tooltip.classList.add('visible', 'opacity-100');
          } else {
            tooltip.classList.remove('visible', 'opacity-100');
            tooltip.classList.add('invisible', 'opacity-0');
          }
        });
        
        // Close when clicking outside
        document.addEventListener('click', function(event) {
          if (isVisible && !tooltip.contains(event.target) && event.target !== trigger) {
            tooltip.classList.remove('visible', 'opacity-100');
            tooltip.classList.add('invisible', 'opacity-0');
            isVisible = false;
          }
        });
      }
    });
  </script>
</div>
                        

                            <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>
                        

                            <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>
                        

                            <div class="p-12 flex flex-wrap justify-center items-center gap-8">
  <!-- Top 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">
      Top
    </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">
      Tooltip on top
    </div>
  </div>
  
  <!-- Bottom 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">
      Bottom
    </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 bottom-0 mt-1 bg-gray-800 text-white text-sm px-2 py-1 rounded whitespace-nowrap before:content-[''] before:absolute before:left-1/2 before:bottom-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-b-gray-800">
      Tooltip on bottom
    </div>
  </div>
  
  <!-- Left 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">
      Left
    </button>
    <div class="absolute z-10 invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity right-full top-1/2 transform -translate-y-1/2 mr-1 bg-gray-800 text-white text-sm px-2 py-1 rounded whitespace-nowrap before:content-[''] before:absolute before:left-full before:top-1/2 before:-translate-y-1/2 before:border-4 before:border-transparent before:border-l-gray-800">
      Tooltip on left
    </div>
  </div>
  
  <!-- Right 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">
      Right
    </button>
    <div class="absolute z-10 invisible 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">
      Tooltip on right
    </div>
  </div>
</div>
                        

                            <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>
                        

                            <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>
                        

                            <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>
                        

                            <div class="p-8 flex justify-center items-center space-x-4">
  <!-- Basic 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">
      Hover me
    </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">
      Hello world
    </div>
  </div>
  
  <!-- Larger Tooltip -->
  <div class="relative inline-block group">
    <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors">
      More 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-gray-800 text-white text-sm px-3 py-2 rounded-md 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">
      Click for additional information
    </div>
  </div>
</div>