popover

html

<button popovertarget="popover" type="button">Show</button>

<div
	id="popover"
	popover
	class="bg-background mx-5 my-auto rounded-md border p-6 opacity-0 shadow transition-[display,opacity] transition-discrete duration-300 open:opacity-100 motion-reduce:duration-0 sm:mx-auto sm:max-w-96 starting:open:opacity-0"
>
	<div class="mb-4 flex justify-between">
		<div class="text-lg font-bold">popover</div>
		<button
			popovertarget="popover"
			type="button"
			class="ghost icon"
			title="Close"
		>
			<span class="icon-[lucide--x]"></span>
		</button>
	</div>
	<p>This works without JavaScript.</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua.
	</p>
</div>

Overview

The Popover API allows websites to show/hide content without using any JavaScript. Add the popover attribute and a unique id to any element to make it a popover. Then create a trigger by adding a <button> with the popovertarget attribute set to the same id.

Animation

With transition behavior: allow-discrete, you can animate the popover entirely with CSS.