jb-popover

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.
• has positioning option to place popover base on another element location.

demo

• standalone sample in storybook

• You can also see in use demo, inside others component like: 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);

anchor position

when you bind some element as an anchor to the popover, popover will position itself base on anchor position. by default popover position itself in bottom and start of the anchor so in "ltr" left of the anchor = left of popover and in rtl right of popover = right of anchor. if you want to change that you can set positionArea property like this:

// will adjust end of popover to end of anchor
document.querySelector("jb-popover").positionArea = {inline:"end"} // end, start, center, center-before, center-after
document.querySelector("jb-popover").positionArea = {block:"before"} // before,after
// or set both
document.querySelector("jb-popover").positionArea = {block:"after",inline:"start"} // before,after

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.
--jb-popover-padding	padding of popover content