# mgn-tip

Latest version **0.0.0** (published 2018-08-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install mgn-tip
pnpm add mgn-tip
yarn add mgn-tip
bun add mgn-tip
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2018-08-24 |
| First published | 2018-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dentsu Isobar |
| Maintainers | frontend-isobar-jp |
| Keywords | tool tip, js, library, ECMA script, not jQuery |

## Links

- npm: https://www.npmjs.com/package/mgn-tip
- npm.io page: https://npm.io/package/mgn-tip

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.0.0 (latest) — 2018-08-24

## README

# mgn-tip ( Don't Need jQuery )


Implement tooltips function.

- Target browser : IE9+

___

# Install

```
npm i mgn-tip -S
```

## Or Download raw data
[↓ download "mgn-tip.js"](https://raw.githubusercontent.com/frontend-isobar-jp/mgn-tip/master/src/mgn-tip.js)


___

# 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 element<br>ex) ".j-tip"|
|option|Object|-|ex)<br>option = {<br>event: "click",<br>fadeSpeed: 100,<br>btnElm: ".btn",<br>detailElm: ".detail"<br>}|


|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/](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");
};
```

---
_Source: https://npm.io/package/mgn-tip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._