0.0.0 • Published 7 years ago
mgn-tip v0.0.0
mgn-tip ( Don't Need jQuery )
Implement tooltips function.
- Target browser : IE9+
Install
npm i mgn-tip -SOr Download raw data
Import
import mgnTip from "mgn-tip"Prepare an HTML with tooltips display orientation in data attribute.
<a class="j-tip_btn" data-direction="[top, right, bottom, left]">top</a>Constructor
new mgnTip(element [, option]);| Argument | Data type | Default | Descroption |
|---|---|---|---|
| element | String | -(Required) | Specify target elementex) ".j-tip" |
| option | Object | - | ex)option = {event: "click",fadeSpeed: 100,btnElm: ".btn",detailElm: ".detail"} |
| Option | Data type | Default | Descroption |
|---|---|---|---|
| event | String | "hover" | Specify event to open or close ("hover" or "click"). |
| fadeSpeed | Number | 0 | Adjust open and close speed. |
| btnElm | String | ".j-tip_btn" | Specify element to become button. |
| detailElm | String | ".j-tip_detail" | Specify element to be content. |
Method
| Method | Argument | Descroption |
|---|---|---|
| ShowEnd = function(){}; | - | To be executed after tooltips are displayed. |
Demo
https://frontend-isobar-jp.github.io/mgn-tip/
import mgnTip from 'mgn-tip';
let tip = new mgnTip(
".j-tip",
{
fadeSpeed: 100
}
);
tip.ShowEnd = function(){
console.log("ShowEnd");
};0.0.0
7 years ago