Create Popovers Around Elements – Popover.js

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

Preview:

Create Popovers Around Elements – Popover.js

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

You Might Be Interested In:


Leave a Reply