ez-popover
v1.0.33
Published
The easiest popover component you've ever used
Downloads
30
Maintainers
atwilliams88devReadme
EZ Popover
Is a very simple to use popover element. We leverage the power of CSS variables to allow for easy styling of the component. The popover element takes care of placement - no need to pass in a top, bottom, right, or left.
Install
CDN
<script
type="module"
src="https://unpkg.com/[email protected]/index.js"
></script>NPM
npm install ez-popover
Quickstart
<head>
<script
type="module"
src="https://unpkg.com/[email protected]/index.js"
></script>
</head>
<div id="p1">
<!-- A wrapping element is NOT required but is recommended -->
<ez-popover id="ez-popover1">
<!-- every popover must have a unique id -->
<button slot="popover__target">
<!-- slot=popover__target triggers the popover -->
Hover Me
</button>
<p slot="popover__body">
<!-- slot=popover__body will be the popover content -->
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>
</ez-popover>
</div>CSS Variables available
--font__family: Arial;
--font__size: 17px;
--color__background: #333;
--color__text: white;
--popover__padding: 4px 16px;
--popover__border-radius: 8px;
--popover__textAlign: center;
--popover__maxWidth: 380px;
--popover__minWidth: 0px;
--popover__border_width: none;
--popover__border_color: none;
--popover__boxShadow: none;
--popover__zIndex: 100;
--arrow__indent: 12px;CSS Example
IMPORTANT - YOU MIGHT WANT TO CHANGE THE MIN OR MAX WIDTH OF THE POPOVER
#p1 ez-popover {
--font__size: 14px;
--popover__minWidth: 200px;
}OPTIONS
<ez-popover disableHover="true" showArrow="true"></ez-popover>Programmatically Close Example
HTML SETUP
<div id="p2">
<ez-popover disableHover="true" id="ez-popover-control">
<button id="slot1" slot="popover__target">
I stay open
</button>
<p slot="popover__body" id="popover__body">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
<button data-popoverControl>Some Button Inside Popover</button>
</p>
</ez-popover>
</div>
<button data-popoverControl>
Some button outside popover
</button>JS SETUP
// Select All Triggers
let allControlButtons = document.querySelectorAll(
'button[data-popoverControl]'
);
// Select Trigger Element
let triggerElement = document.querySelector('#slot1');
function togglePopover() {
triggerElement.click();
}
allControlButtons.forEach((btn) =>
btn.addEventListener('click', togglePopover)
);