mgn-tip
v0.0.0
Published
Downloads
6
Maintainers
Readme
mgn-tip ( Don't Need jQuery )
Implement tooltips function.
- Target browser : IE9+
Install
npm i mgn-tip -S
Or 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");
};