Tailwind CSS Popover

A simple and compact dialog of an action.

Live Demo

We use JavaScript similar to the snippet above to render the following live popover.

Design
HTML

<button
	type="button"
	class="btn flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-300"
	data-bs-toggle="popover"
	data-bs-title="Popover title"
	data-bs-content="And here's some amazing content. It's very engaging. Right?"
	>Click to toggle popover </button>

Four Direction

Four options are available: top, right, bottom, and left.

Design
HTML

<button
		type="button"
		class="btn flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-300"
		data-bs-container="body"
		data-bs-toggle="popover"
		data-bs-placement="top"
		data-bs-content="Top popover"
		>
 Popover on top
 </button>
 <button
		type="button"
		class="btn flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-300"
		data-bs-container="body"
		data-bs-toggle="popover"
		data-bs-placement="right"
		data-bs-content="Right popover"
		>
 Popover on right
 </button>
 <button
		type="button"
		class="btn flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-300"
		data-bs-container="body"
		data-bs-toggle="popover"
		data-bs-placement="bottom"
		data-bs-content="Bottom popover"
		>
 Popover on bottom
 </button>
 <button
		type="button"
		class="btn flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-300"
		data-bs-container="body"
		data-bs-toggle="popover"
		data-bs-placement="left"
		data-bs-content="Left popover"
		>
 Popover on left
 </button>