rusion-popper

A popper manager library

Online Demo

Install

npm i rusion-popper

Get start

prepare a target element

<button id="target"> I am target</button>

prepare a popper element

<div id="popper">
    <div class="rusion-popper-content">
        popper content
    </div>
</div>

create popper instance

new RusionPopper({
    popperEl: document.querySelector('#popper'),
    targetEl: document.querySelector('#target')
})

Parameters

The constructor options of RusionPopper

name	type	desc
popperEl	HTMLElement	popper element(not selector string)
targetEl	HTMLElement	target element(not selector string)
offset	number	duration between target and popper(not include arrow size)
boundary	HTMLElement,selector string,window	the boundary element to contain the popper element
placement	string	default:bottom, can be: top,left,bottom,right, top-start,top-center,top-end, bottom-start,bottom-center,bottom-end, left-start,left-center,left-end, right-start,right-center,right-end,
backgroundColor	string	the backgroundColor of the popper content and popper arrow
boxShadow	string	the boxShadow of the popper content and popper arrow
arrow	boolean	default is false, if true, you need to provide div.rusion-popper-arrow under popper element.
arrowSize	number	default is 20, the size of the popper arrow

Methods

RusionPopper.prototype

name	desc
refresh	refresh the position of the popper
destroy	release variable and unbind event
setPlacement(placement:string)	change placement

RusionTooltip

prepare target element like this:

<button id="target">target</button>

create tooltip instance

new RusionPopper.RusionTooltip({
    targetEl: document.querySelector('#target'),
    content: 'this is tooltip content, content parameter also can accept a HTMLElement to customize tooltip content'
})

Parameters

The constructor options of RusionTooltip

name	type	desc
targetEl	HTMLElement	target element(not selector string)
offset	number	duration between target and popper(not include arrow size)
boundary	HTMLElement,selector string,window	the boundary element to contain the popper element
placement	string	default:bottom, can be: top,left,bottom,right, top-start,top-center,top-end, bottom-start,bottom-center,bottom-end, left-start,left-center,left-end, right-start,right-center,right-end,
backgroundColor	string	the backgroundColor of the popper content and popper arrow
boxShadow	string	the boxShadow of the popper content and popper arrow
arrow	boolean	default is false, if true, you need to provide div.rusion-popper-arrow under popper element.
arrowSize	number	default is 20, the size of the popper arrow
---	---	---
theme	'light','dark'(default)	the style of tooltip
animate	'scale','drop','fade'(default)	the animation of tooltip when show and hide
content	string,HTMLElement	this content of tooltip
trigger	'always'(default),'click','focus','hover','manual'	the way to show tooltip
removeOnHide	boolean(true)	when tooltip is hide, tooltip will automatically remove tooltip element from body