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

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');

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)