Popovers

<div class="relative inline-block" data-controller="popover">
  <button data-action="click->popover#toggle" class="px-4 py-2 bg-blue-600 text-white rounded-md">
    Click me
  </button>
  <div data-popover-target="content" class="hidden absolute z-10 w-64 mt-2 bg-white rounded-lg shadow-lg border border-gray-200">
    <div class="px-4 py-3 border-b border-gray-200">
      <h3 class="font-semibold text-gray-900">Popover Title</h3>
    </div>
    <div class="px-4 py-3">
      <p class="text-sm text-gray-600">This is the popover content.</p>
    </div>
  </div>
</div>

<div class="relative inline-block group">
  <button class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">
    Hover me
  </button>
  <div class="invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity absolute z-10 w-64 mt-2 bg-white rounded-lg shadow-lg border border-gray-200">
    <div class="px-4 py-3 border-b border-gray-200">
      <h3 class="font-semibold text-gray-900">Quick Info</h3>
    </div>
    <div class="px-4 py-3">
      <p class="text-sm text-gray-600">This appears when you hover.</p>
    </div>
  </div>
</div>

<!-- Top Position -->
<div class="relative inline-block group">
  <button>Top</button>
  <div class="invisible group-hover:visible absolute bottom-full mb-2 left-1/2 -translate-x-1/2 ...">
    Content
  </div>
</div>

<!-- Bottom Position -->
<div class="relative inline-block group">
  <button>Bottom</button>
  <div class="invisible group-hover:visible absolute mt-2 left-1/2 -translate-x-1/2 ...">
    Content
  </div>
</div>

<!-- Left Position -->
<div class="relative inline-block group">
  <button>Left</button>
  <div class="invisible group-hover:visible absolute right-full mr-2 top-1/2 -translate-y-1/2 ...">
    Content
  </div>
</div>

<!-- Right Position -->
<div class="relative inline-block group">
  <button>Right</button>
  <div class="invisible group-hover:visible absolute left-full ml-2 top-1/2 -translate-y-1/2 ...">
    Content
  </div>
</div>

<!-- Small (w-48) -->
<div class="w-48 bg-white rounded-lg shadow-lg border">...</div>

<!-- Medium (w-64) -->
<div class="w-64 bg-white rounded-lg shadow-lg border">...</div>

<!-- Large (w-80) -->
<div class="w-80 bg-white rounded-lg shadow-lg border">...</div>

<!-- Extra Large (w-96) -->
<div class="w-96 bg-white rounded-lg shadow-lg border">...</div>

<div class="relative inline-block group">
  <button class="px-4 py-2 bg-indigo-600 text-white rounded-md">View Profile</button>
  <div class="invisible group-hover:visible absolute z-10 w-72 mt-2 bg-white rounded-lg shadow-lg border">
    <div class="px-4 py-3">
      <div class="flex items-center gap-3">
        <div class="w-12 h-12 rounded-full bg-indigo-500">JD</div>
        <div>
          <h3 class="font-semibold">John Doe</h3>
          <p class="text-xs text-gray-500">Software Engineer</p>
        </div>
      </div>
      <div class="mt-3 flex gap-2">
        <button class="flex-1 px-3 py-1.5 text-xs bg-indigo-600 text-white rounded-md">Follow</button>
        <button class="flex-1 px-3 py-1.5 text-xs border rounded-md">Message</button>
      </div>
    </div>
  </div>
</div>

<div class="relative inline-block group">
  <button class="p-2 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100">
    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
    </svg>
  </button>
  <div class="invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity absolute z-10 w-56 mt-2 bg-white rounded-lg shadow-lg border">
    <div class="px-3 py-2">
      <p class="text-xs text-gray-700 font-medium">Need help?</p>
      <p class="text-xs text-gray-600 mt-1">Click to learn more.</p>
    </div>
  </div>
</div>