Skip to content

A javascript plugin for popper which could be used to positioning tooltip or popover

License

Notifications You must be signed in to change notification settings

sa-si-dev/popper

Repository files navigation

Popper Plugin

A javascript plugin for popper which could be used to positioning tooltip or popover

Install

npm install --save popper-plugin

Import file

<script src="node_modules/popper-plugin/dist/popper.min.js"></script>

Initialize plugin

const samplePopper = new PopperComponent({
  /** Refer below for available properties */
});

Properties

Name Type Default value Description
$popperEle Element Popper element
$triggerEle Element Trigger element
$arrowEle Element Arrow icon in the popper
position Number auto Position of popper (top, bottom, left, right, auto)
margin Number 8 Space between popper and its activator (in pixel)
offset Number 5 Space between popper and window edge (in pixel)
enterDelay Number 0 Delay time before showing popper (in milliseconds)
exitDelay Number 0 Delay time before hiding popper (in milliseconds)
showDuration Number 300 Transition duration for show animation (in milliseconds)
hideDuration Number 200 Transition duration for hide animation (in milliseconds)
transitionDistance Number 10 Distance to translate on show/hide animation (in pixel)
zIndex Number 1 CSS z-index value for popper
afterShow Function Callback function to trigger after show
afterHide Function Callback function to trigger after hide

Methods

show()

/**
 * @prop {boolean} [resetPosition] - Recalculate position before show
 * @prop {object} [data] - Any custom data which would be passed to afterShow callback function call
 */
samplePopper.show({});

hide()

/**
 * @prop {object} [data] - Any custom data which would be passed to afterHide callback function call
 */
samplePopper.hide({});

updatePosition()

To recalculate the position of the popper element. Which colud be used when scrolling the parent element.

samplePopper.updatePosition();

About

A javascript plugin for popper which could be used to positioning tooltip or popover

Resources

License

Stars

Watchers

Forks

Packages

No packages published