Popover

Displays rich content in a portal, triggered by a button.

<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>

Installation

1. Install the component

Install flexilla popover using your package manager

npm install @flexilla/popover

Configure your popover

Add your component’s config in a .js or .ts file

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')
  },
})