1.0.4 • Published 4 years ago
rusion-ui v1.0.4
yirous-popper
A popper manager library
Install
npm i yirous-popper -S
Get 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 |