Create Popovers Around Elements – Popover.js

Category: Javascript , Tooltip | May 14, 2021
Author: sa-si-dev
Views Total: 43 views
Official Page: Go to website
Last Update: May 14, 2021
License: MIT


Create Popovers Around Elements – Popover.js


A tiny yet fully configurable popover JavaScript library for creating tooltip- and popover-style popups around any DOM element you specify.


  • 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>

3. Attach the popover to an element.

<button class="popover-demo" 
        Click Me
  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.

  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)
  • 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

6. You can also pass the options via HTML data-* attributes as follows:

<div class="popover-demo"

7. Trigger functions after the popover is shown & hidden.

  ele: '.popover-demo',
  beforeShow: function(){
    // do something
  beforeHide: function(){
    // do something
  afterShow: function(){
    // do something
  afterHide: function(){
    // do something

You Might Be Interested In:

Leave a Reply