Four Directions
<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>
Hover and Click Toggle
<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-900 focus:bg-primary-900">
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-900">
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>
Colored Popovers
<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-900">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-border-color 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-900">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-border-color 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-900">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-border-color 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-900">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-border-color 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-900">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-border-color 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>
Disabled Elements
<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-900 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>
'/%3e%3cpath%20d='M19.3718%208.44531C13.2794%208.77342%208.42255%2013.8273%208.42255%2020.0001V34.643C8.42255%2036.336%207.05011%2037.7085%205.35714%2037.7085C3.66416%2037.7085%202.29171%2036.336%202.29171%2034.643V22.0124C5.86298%2012.0352%2013.2293%208.65628%2019.3718%208.44531Z'%20fill='url(%23paint1_linear_1134_24406)'/%3e%3cpath%20d='M24.111%2018.6378L20.8502%2019.8353L19.6368%2023.0902L18.4392%2019.8294L15.1843%2018.616L18.4451%2017.4184L19.6586%2014.1636L20.8561%2017.4243L24.111%2018.6378Z'%20fill='url(%23paint2_linear_1134_24406)'/%3e%3cpath%20d='M26.0749%2014.0398L24.7502%2014.5263L24.2573%2015.8486L23.7708%2014.5239L22.4485%2014.0309L23.7732%2013.5444L24.2661%2012.2221L24.7526%2013.5468L26.0749%2014.0398Z'%20fill='url(%23paint3_linear_1134_24406)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_1134_24406'%20x1='21.5672'%20y1='33.2429'%20x2='17.6287'%20y2='7.94212'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_1134_24406'%20x1='5.99286'%20y1='14.1017'%20x2='11.3239'%20y2='34.0911'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
