Popovers

	 Copy
	
	<div class="flex flex-wrap justify-center sm:justify-start gap-2">

	<div class="hs-tooltip [--trigger:focus] [--placement:top]">
		<button type="button"
		class="btn hs-tooltip-toggle bg-transparent border border-primary text-primary hover:bg-primary-100 focus:bg-primary-100">
		Popover Top
		</button>

		<div class="hs-tooltip-content absolute z-10 invisible opacity-0 inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-border-color rounded-lg shadow-sm hs-tooltip-shown:visible hs-tooltip-shown:opacity-100">
		<div class="px-3 py-2 border-b border-border-color rounded-t-lg">
			<h5 class="font-semibold text-gray-900">Popover Top</h5>
		</div>
		<div class="px-3 py-2">
			<p>And here's some amazing content. It's very engaging. Right?</p>
		</div>
		</div>
	</div>

	<div class="hs-tooltip [--trigger:focus] [--placement:bottom]">
		<button type="button"
		class="btn hs-tooltip-toggle bg-transparent border border-primary text-primary hover:bg-primary-100 focus:bg-primary-100">
		Popover Bottom
		</button>

		<div class="hs-tooltip-content absolute z-10 invisible opacity-0 inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-border-color rounded-lg shadow-sm hs-tooltip-shown:visible hs-tooltip-shown:opacity-100">
		<div class="px-3 py-2 border-b border-border-color rounded-t-lg">
			<h5 class="font-semibold text-gray-900">Popover Bottom</h5>
		</div>
		<div class="px-3 py-2">
			<p>And here's some amazing content. It's very engaging. Right?</p>
		</div>
		<div data-popper-arrow></div>
		</div>
	</div>

	</div>
	
	

	 Copy

	
	<div class="preview-content flex flex-wrap justify-center sm:justify-start gap-2">

		<div class="hs-tooltip [--trigger:focus]">
			<button type="button" class="btn hs-tooltip-toggle bg-primary border border-primary text-white hover:bg-primary-hover focus:bg-primary-hover">
			Click to toggle popover
			</button>
			<div class="hs-tooltip-content absolute z-10 invisible opacity-0 inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-border-color rounded-lg shadow-sm hs-tooltip-shown:visible hs-tooltip-shown:opacity-100">
				<div class="px-3 py-2 border-b border-border-color rounded-t-lg">
					<h5 class="font-semibold text-gray-900">Popover Title</h5>
				</div>
				<div class="px-3 py-2">
					<p>And here's some amazing content. It's very engaging. Right?</p>
				</div>
			</div>
		</div>

		<div class="hs-tooltip [--trigger:hover]">
			<button type="button" class="btn hs-tooltip-toggle bg-primary border border-primary text-white hover:bg-primary-hover">
			On Hover Tooltip
			</button>
			<div class="hs-tooltip-content absolute z-10 invisible opacity-0 inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-border-color rounded-lg shadow-sm hs-tooltip-shown:visible hs-tooltip-shown:opacity-100">
				<div class="px-3 py-2 border-b border-border-color rounded-t-lg">
					<h5 class="font-semibold text-gray-900">Popover Title</h5>
				</div>
				<div class="px-3 py-2">
					<p>And here's some amazing content. It's very engaging. Right?</p>
				</div>
			</div>
		</div>
	</div>
	
	

	 Copy
	
	<div class="preview-content flex flex-wrap sm:flex-row flex-col items-center justify-center sm:justify-start gap-2">

		<div class="hs-tooltip [--trigger:focus]">
			<button type="button" class="btn hs-tooltip-toggle bg-primary text-white hover:bg-primary-hover">Primary</button>
			<div class="hs-tooltip-content absolute z-10 invisible opacity-0 inline-block w-64 text-sm text-white transition-opacity duration-300 bg-primary border border-primary rounded-lg shadow-sm hs-tooltip-shown:visible hs-tooltip-shown:opacity-100">
				<div class="px-3 py-2 border-b border-white dark:border-dark rounded-t-lg">
					<h5 class="font-semibold text-white">Primary Background</h5>
				</div>
				<div class="px-3 py-2">
					<p>Popover with primary background.</p>
				</div>
			</div>
		</div>

		<div class="hs-tooltip [--trigger:focus]">
			<button type="button" class="btn hs-tooltip-toggle bg-info text-white hover:bg-info-800">Info</button>
			<div class="hs-tooltip-content absolute z-10 invisible opacity-0 inline-block w-64 text-sm text-white transition-opacity duration-300 bg-info border border-info rounded-lg shadow-sm hs-tooltip-shown:visible hs-tooltip-shown:opacity-100">
				<div class="px-3 py-2 border-b border-white dark:border-dark rounded-t-lg">
					<h5 class="font-semibold text-white">Info Background</h5>
				</div>
				<div class="px-3 py-2">
					<p>Popover with info background.</p>
				</div>
			</div>
		</div>

		<div class="hs-tooltip [--trigger:focus]">
			<button type="button" class="btn hs-tooltip-toggle bg-warning text-white hover:bg-warning-800">Warning</button>
			<div class="hs-tooltip-content absolute z-10 invisible opacity-0 inline-block w-64 text-sm text-white transition-opacity duration-300 bg-warning border border-warning rounded-lg shadow-sm hs-tooltip-shown:visible hs-tooltip-shown:opacity-100">
				<div class="px-3 py-2 border-b border-white dark:border-dark rounded-t-lg">
					<h5 class="font-semibold text-white">Warning Background</h5>
				</div>
				<div class="px-3 py-2">
					<p>Popover with warning background.</p>
				</div>
			</div>
		</div>

		<div class="hs-tooltip [--trigger:focus]">
			<button type="button" class="btn hs-tooltip-toggle bg-success text-white hover:bg-success-800">Success</button>
			<div class="hs-tooltip-content absolute z-10 invisible opacity-0 inline-block w-64 text-sm text-white transition-opacity duration-300 bg-success border border-success rounded-lg shadow-sm hs-tooltip-shown:visible hs-tooltip-shown:opacity-100">
				<div class="px-3 py-2 border-b border-white dark:border-dark rounded-t-lg">
					<h5 class="font-semibold text-white">Success Background</h5>
				</div>
				<div class="px-3 py-2">
					<p>Popover with success background.</p>
				</div>
			</div>
		</div>

		<div class="hs-tooltip [--trigger:focus]">
			<button type="button" class="btn hs-tooltip-toggle bg-danger text-white hover:bg-danger-800">Danger</button>
			<div class="hs-tooltip-content absolute z-10 invisible opacity-0 inline-block w-64 text-sm text-white transition-opacity duration-300 bg-danger border border-danger rounded-lg shadow-sm hs-tooltip-shown:visible hs-tooltip-shown:opacity-100">
				<div class="px-3 py-2 border-b border-white dark:border-dark rounded-t-lg">
					<h5 class="font-semibold text-white">Danger Background</h5>
				</div>
				<div class="px-3 py-2">
					<p>Popover with danger background.</p>
				</div>
			</div>
		</div>

	</div>
	
	

	 Copy
	
	<div class="preview-content flex flex-wrap justify-center sm:justify-start gap-2">
		<div class="hs-tooltip [--trigger:focus]">
			<button type="button" class="btn hs-tooltip-toggle bg-primary border border-primary text-white text-center hover:bg-primary-hover cursor-not-allowed" disabled> Disabled Button</button>
			<div class="hs-tooltip-content absolute z-10 invisible opacity-0 inline-block w-64 text-sm text-white transition-opacity duration-300 bg-primary border border-primary rounded-lg shadow-sm hs-tooltip-shown:visible hs-tooltip-shown:opacity-100">
				<div class="px-3 py-2 border-b border-border-color rounded-t-lg">
					<h5 class="font-semibold text-white">Disabled Popover</h5>
				</div>
				<div class="px-3 py-2">
					<p>This popover button is disabled.</p>
				</div>
			</div>
		</div>
	</div>