Tooltip States

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