OutSystems / popper

A javascript plugin for popper which could be used to positioning tooltip or popover. Used for Tooltip, Overflow Menu and Dropdowns in order to have our own version to evolve but at the same time be able to bring any fix from the "parent" repo.

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();