Create Popovers Around Elements – Popover.js

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