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
|
38 | var tip = require('tip');
|
39 | tip('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
|
48 | var Tip = require('tip');
|
49 | var tip = new Tip('Hello!');
|
50 | tip.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#hide([ms])
|
70 |
|
71 | Hide the tip immediately or wait `ms`.
|
72 |
|
73 | ### Tip#effect(name)
|
74 |
|
75 | Use effect `name`. Default with `Tip.effect = 'fade'` for example.
|
76 |
|
77 | ## License
|
78 |
|
79 | MIT |
\ | No newline at end of file |