Author: | sa-si-dev |
---|---|
Views Total: | 1,254 views |
Official Page: | Go to website |
Last Update: | October 22, 2022 |
License: | MIT |
Preview:

Description:
A tiny yet fully configurable popover JavaScript library for creating tooltip- and popover-style popups around any DOM element you specify.
Features:
- Triggered with either click or hover event.
- Smart positioning.
- Smooth transitions.
- With arrow icon or not.
How to use it:
1. Import the necessary JavaScript and CSS files into the document.
<link rel="stylesheet" href="dist/popover.min.css" /> <script src="dist/popover.min.js"></script>
2. Insert content into the popover.
<div id="popover-target"> <div class="pop-comp-content">Popover Content</div> </div>
3. Attach the popover to an element.
<button class="popover-demo" data-popover-target="#popover-target"> Click Me </button>
PopoverComponent.init({ ele: '.popover-demo' });
4. By default, the popover is triggered by click. You can the showOnHover option to true if you want to show the popover on hover just like a tooltip.
PopoverComponent.init({ ele: '.popover-demo', showOnHover: true });
5. All possible options to config the popover library.
- ele: Trigger element to toggle popover element
- target: CSS selector to get popover element
- position=auto: Position of popover element (auto, top, bottom, left, right, top left, top right, bottom left, bottom right, left top, left bottom, right top, right bottom)
- margin=8: Space between popover element and its Trigger element (in pixel)
- offset=5: Space between popover element and window edge
- enterDelay=0: Delay time before showing popover element (in milliseconds)
- exitDelay=0: Delay time before hiding popover element (in milliseconds)
- showDuration=300: Transition duration for show animation (in milliseconds)
- hideDuration=200: Transition duration for hide animation (in milliseconds)
- transitionDistance=10: Distance to translate on show/hide animation (in pixel)
- zIndex=1: CSS z-index value for popover element
- hideOnOuterClick=true: Hide on clicking outside of popover element
- showOnHover=false: Show popover element on hovering trigger element
- hideArrowIcon=false: Hide arrow icon in the popover
- disableUpdatePosition=false: Disable updating the popover position when scrolling on the parent element
- disableManualAction=false: Disable showing the popover on click/hover
- updatePositionThrottle=100: Throttle time for updating dropbox position on scroll event
6. You can also pass the options via HTML data-*
attributes as follows:
<div class="popover-demo" data-popover-position="bottom" ></div>
7. Trigger functions after the popover is shown & hidden.
PopoverComponent.init({ ele: '.popover-demo', beforeShow: function(){ // do something }, beforeHide: function(){ // do something } afterShow: function(){ // do something }, afterHide: function(){ // do something } });
8. API methods.
// show document.querySelector('#sample-popover-ele').show(); // hide document.querySelector('#sample-popover-ele').hide(); // destroy document.querySelector('#sample-popover-ele').destroy(); // update document.querySelector('#sample-popover-ele').updatePosition();
Changelog:
v1.0.12 (10/22/2022)
- Bugfix
v1.0.11 (09/25/2022)
- Updating position on window resize
v1.0.10 (07/18/2022)
- Bugfix
- New property – updatePositionThrottle
v1.0.8 (06/19/2022)
- New method – destroy()
v1.0.7 (03/19/2022)
- New method – updatePosition
v1.0.6 (08/20/2021)
- Bugfixes
v1.0.4 (08/15/2021)
- New properties: disableUpdatePosition and disableManualAction
v1.0.2 (07/11/2021)
- Bug fixes
- New properties: offset