jb-popover

sometimes you need a to open a small window next to a element to show more detail or more available actions. jb-popover will be doing that for you with some benefits:

• handle overflow if popover could not fit into it's designed place.
• show popover as a small window next to element in desktop and show it as a bottom-sheet in mobile
• handle animations in standard manner with overflow handler

demo

jb-popover doesn't have any Demo right now but you can see it's usage in jb-date-input and jb-time-input ot jb-select

usage

install:

npm i jb-popover

usage:

import 'jb-popover'

<jb-popover>
  <!-- put your content here   -->
   <div>my custom content</div>
<jb-popover>

open & close popover

by just calling open and close method:

document.querySelector('jb-popover').open();
document.querySelector('jb-popover').close();

overflow

we can handle overflow by set 2 overflowHandler, overflowDom property

//popover will slide soothly up if it overflow the page or any other assigned container
document.querySelector('jb-popover').overflowHandler = "SLIDE";
// popover would check overflow status with window by default if you set overflowDom to any other DOM Element it will check overflow by it for example if ypu use it in a modal you can set it to modal dom. set this property is optional
document.querySelector('jb-popover').overflowDom= document.querySelector('jb-modal');

Bind to element

jb-popover use absolute positioning by default because it more performant and easier to manage. but in some scenario you may prefer fixed position with top & left over absolute like when popover open in a modal.
for this situation we have method called bindTarget. this method get an element and open popover base on that element position in page in fixed to make sure popover is always on top.

const yourElement = document.querySelector("input")
document.querySelector("jb-popover").bindTarget(yourElement);

prevent close on mobile by back button

in some cases you want to prevent popover from closing in mobile. for doing so, just add id attribute to the popover element

set custom style

you can customize jb-popover styles by just set some css variable. here is the variable list:

| css variable name | description | | ------------- | ------------- | | --jb-popover-z-index | z-index of opened popover | | --jb-popover-bg-color | background color of popover content | | --jb-popover-border-radius | border-radius of popover (must be single like 24px and not 24px 24px 24px 24px) | | --jb-popover-top | top of the popover in desktop mode. |