UNPKG

1.66 kBMarkdownView Raw
1
2# Tip
3
4 Tip component. Inspired by [tipsy](https://github.com/jaz303/tipsy) without the weird jQuery
5 API.
6
7 ![js tip component](http://f.cl.ly/items/2H1D232Y0g1T3g1G0l3s/Screen%20Shot%202012-08-02%20at%202.31.50%20PM.png)
8 ![js tip with markup](http://f.cl.ly/items/2h1F2B1P1C3M0g0a0M0n/Screen%20Shot%202012-08-02%20at%203.34.06%20PM.png)
9
10 ![js maru](http://f.cl.ly/items/1I2V2o0q3M2p1E2H183w/Screen%20Shot%202012-08-02%20at%206.48.28%20PM.png)
11
12## Installation
13
14```
15$ npm install tip-component
16```
17
18## Features
19
20 - events for composition
21 - "auto" positioning on window resize / scroll
22 - fluent API
23
24## Events
25
26 - `show` the tip is shown
27 - `hide` the tip is hidden
28
29## API
30
31### Tip(el, [options])
32
33 Attach a `Tip` to an element, and display the `title`
34 attribute's contents on hover. Optionally apply a hide `delay`
35 in milliseconds.
36
37```js
38var tip = require('tip');
39tip('a[title]', { delay: 300 });
40```
41
42### new Tip(content)
43
44 Create a new tip with `content` being
45 either a string, html, element, etc.
46
47```js
48var Tip = require('tip');
49var tip = new Tip('Hello!');
50tip.show('#mylink');
51```
52
53### Tip#position(type)
54
55 - `north`
56 - `north east`
57 - `north west`
58 - `south`
59 - `south east`
60 - `south west`
61 - `east`
62 - `west`
63
64### Tip#show(el)
65
66 Show the tip attached to `el`, where `el`
67 may be a selector or element.
68
69### Tip#show(x, y)
70
71 Show the tip at the absolute position `(x, y)`.
72
73### Tip#hide([ms])
74
75 Hide the tip immediately or wait `ms`.
76
77### Tip#effect(name)
78
79 Use effect `name`. Default with `Tip.effect = 'fade'` for example.
80
81### Themes
82
83 - [Aurora](https://github.com/component/aurora-tip)
84
85## License
86
87 MIT
\No newline at end of file