0.0.7 • Published 4 years ago
yirous-popper v0.0.7
yirous-popper
A popper manager library
Install
npm i yirous-popper -SGet start
prepare a target element
<button id="target"> I am target</button>prepare a popper element
<div id="popper">
<div class="yirous-popper-content">
popper content
</div>
</div>create popper instance
new YirousPopper({
popperEl: document.querySelector('#popper'),
targetEl: document.querySelector('#target')
})Parameters
The constructor options of YirousPopper
| 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.yirous-popper-arrow under popper element. |
| arrowSize | number | default is 20, the size of the popper arrow |
Methods
YirousPopper.prototype
| name | desc |
|---|---|
| refresh | refresh the position of the popper |
| destroy | release variable and unbind event |
| setPlacement(placement:string) | change placement |
YirousTooltip
prepare target element like this:
<button id="target">target</button>create tooltip instance
new Yirouspopper.YirousTooltip({
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 YirousTooltip
| 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.yirous-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 |