Displays rich content in a portal, triggered by a button.
Nisi suscipit ab illo molestiae! Cum possimus necessitatibus enim ipsum sapiente!
<button data-popover-trigger data-popover-id="demo-popover" class="btn variant-outlined sz-md"> <span class="btn-label">Show PopOver</span> </button> <div data-fx-popover id="demo-popover" aria-describedby="popover-1" class="card variant-outlined invisible fixed left-[--fx-popper-placement-x] top-[--fx-popper-placement-y] z-50 max-w-xs scale-95 opacity-0 shadow-lg duration-200 data-[state=open]:visible data-[state=open]:scale-100 data-[state=open]:opacity-100"> <h2 id="popover-1" class="text-title text-lg font-medium">Help</h2> <p class="text-body mt-3 text-sm">Nisi suscipit ab illo molestiae! Cum possimus necessitatibus enim ipsum sapiente!</p> </div>
Install flexilla popover using your package manager
npm install @flexilla/popover
Add your component’s config in a .js or .ts file
.js
.ts
import { Popover } from '@flexilla/popover' new Popover('#demo-popover', { offsetDistance: 8, placement: 'bottom-middle', onShow: () => { document.documentElement.classList.add('overflow-hidden') }, onHide: () => { document.documentElement.classList.remove('overflow-hidden') }, })
Unlock all templates now for $537 $97.99