UNPKG

1.78 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, string)
32
33 Equivalent to `Tip(el, { value: string })`.
34
35### Tip(el, [options])
36
37 Attach a `Tip` to an element, and display the `title`
38 attribute's contents on hover. Optionally apply a hide `delay`
39 in milliseconds.
40
41```js
42var tip = require('tip');
43tip('a[title]', { delay: 300 });
44```
45
46### new Tip(content)
47
48 Create a new tip with `content` being
49 either a string, html, element, etc.
50
51```js
52var Tip = require('tip');
53var tip = new Tip('Hello!');
54tip.show('#mylink');
55```
56
57### Tip#position(type)
58
59 - `north`
60 - `north east`
61 - `north west`
62 - `south`
63 - `south east`
64 - `south west`
65 - `east`
66 - `west`
67
68### Tip#show(el)
69
70 Show the tip attached to `el`, where `el`
71 may be a selector or element.
72
73### Tip#show(x, y)
74
75 Show the tip at the absolute position `(x, y)`.
76
77### Tip#hide([ms])
78
79 Hide the tip immediately or wait `ms`.
80
81### Tip#effect(name)
82
83 Use effect `name`. Default with `Tip.effect = 'fade'` for example.
84
85### Themes
86
87 - [Aurora](https://github.com/component/aurora-tip)
88 - [Nightrider](https://github.com/jb55/nightrider-tip)
89
90## License
91
92 MIT