├── .gitignore
├── LICENSE
├── README.md
├── Rakefile
├── docs
├── .gitignore
└── src
│ ├── index.html.erb
│ ├── javascripts
│ ├── project.yml
│ ├── stylesheets
│ └── tipsy-docs.css
└── src
├── javascripts
└── jquery.tipsy.js
└── stylesheets
└── tipsy.css
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | pkg
3 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Copyright (c) 2008 Jason Frame (jason@onehackoranother.com)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # tipsy
2 |
3 | Facebook-style tooltip plugin for jQuery
4 |
5 | (c) 2008-2010 Jason Frame (jason@onehackoranother.com)
6 |
7 | Released under The MIT License.
8 |
9 | ## Description:
10 |
11 | tipsy is a simple jQuery plugin for generating Facebook-style tooltips.
12 |
13 | It's used by Twitter, Github, Slideshare and Bitbucket, amongst others.
14 |
15 | ## Homepage:
16 |
17 | http://onehackoranother.com/projects/jquery/tipsy
18 |
19 | ## Source:
20 |
21 | Hosted at GitHub; browse at:
22 |
23 | http://github.com/jaz303/tipsy/tree/master
24 |
25 | Or clone from:
26 |
27 | git://github.com/jaz303/tipsy.git
28 |
29 | ## Usage:
30 |
31 | 1. Copy the contents of src/{images,javascripts,stylesheets} to the corresponding asset directories in your project.
32 | If the relative path of your images directory from your stylesheets directory is not "../images", you'll need to adjust tipsy.css appropriately.
33 |
34 | 2. Insert the neccesary elements in your document's `` section, e.g.:
35 |
36 |
37 |
38 |
39 | Remember to include jquery.tipsy.js *after* including the main jQuery library.
40 |
41 | 3. Initialise Tipsy in your document.onload, e.g.:
42 |
43 |
48 |
49 | Please refer to the docs directory for more examples and documentation.
50 |
51 |
--------------------------------------------------------------------------------
/Rakefile:
--------------------------------------------------------------------------------
1 | PROJECT_NAME='tipsy'
2 | PROJECT_VERSION='1.0.0a'
3 | MANIFEST=%w(src LICENSE README)
4 |
5 | def project_tag
6 | "#{PROJECT_NAME}-#{PROJECT_VERSION}"
7 | end
8 |
9 | def target
10 | File.join('pkg', project_tag)
11 | end
12 |
13 | task :clean do
14 | `rm -rf pkg`
15 | end
16 |
17 | task :docs do
18 | `cd docs && project-kit --target=archive build src build`
19 | end
20 |
21 | task :build => :clean do
22 | `mkdir -p #{target}`
23 | `cd docs && project-kit --target=archive build src build`
24 | `mv docs/build #{target}/docs`
25 | MANIFEST.each { |e| `cp -R #{e} #{target}/` }
26 | end
27 |
28 | task :package => :build do
29 | `cd pkg && zip -ro ../#{project_tag}.zip #{project_tag}`
30 | end
31 |
--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
1 | build
2 |
--------------------------------------------------------------------------------
/docs/src/index.html.erb:
--------------------------------------------------------------------------------
1 |
2 |
19 |
20 |
Overview
21 |
22 |
Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on
23 | an anchor tag's title attribute.
24 |
25 |
Examples & Usage
26 |
27 |
Basic
28 |
29 |
By default, tooltips will appear centred underneath their anchor:
$('#foo').tipsy({gravity: 'n'}); // nw | n | ne | w | e | sw | s | se
91 |
92 |
As of version 0.1.3, it's possible to use a callback function to set the gravity dynamically at hover-time. Within the callback, this refers to the active element, and the function should return the calculated gravity as a string. Two demo callbacks are supplied - $.fn.tipsy.autoNS and $.fn.tipsy.autoWE - which select north/south and west/east gravity, respectively, based on the element's location in the viewport.
93 |
94 |
Here's an example (scroll the page to see the effect):
Tipsy tooltips are 'live' - if the source attribute's value changes, the tooltip text will be
197 | updated the next time the tooltip is shown. There's one caveat - if you wish to remove the tooltip
198 | by setting the title attribute to an empty string, set the original-title
199 | attribute instead (this only applies if you're using the title attribute).
200 |
201 |
202 |
Dynamic updating example:
203 |
204 | Hover over me |
205 | New tooltip text:
206 |
207 |
208 |
209 |
210 |
213 |
214 |
215 |
216 |
Using Tooltips on Form Inputs
217 |
218 |
Tooltips can be bound to form inputs' focus/blur events using the option
219 | {trigger: 'focus'}:
279 | Live events are supported using the option {live: true}.
280 | jQuery ≥ 1.4.1 is required and live tooltips do not support manual triggering.
281 |
$.fn.tipsy.defaults = {
303 | className: null, // custom class to add to tooltip (string or function)
304 | delayIn: 0, // delay before showing tooltip (ms)
305 | delayOut: 0, // delay before hiding tooltip (ms)
306 | fade: false, // fade tooltips in/out?
307 | fallback: '', // fallback text to use when no tooltip text
308 | gravity: 'n', // gravity (string or function)
309 | html: false, // is tooltip content HTML?
310 | live: false, // use live event support?
311 | offset: 0, // pixel offset of tooltip from element
312 | opacity: 0.8, // opacity of tooltip
313 | title: 'title', // attribute/callback containing tooltip text
314 | trigger: 'hover' // how tooltip is triggered - hover | focus | manual
315 | };
316 |
317 |
318 |
319 |
Notes
320 |
321 |
Tipsy needs to erase any existing value for an element's title attribute in
322 | order to suppress the browser's native tooltips. It is stashed in the element's
323 | original-title attribute in case you need to retrieve it later.
324 |
325 |
As of version 0.1.4, the tooltip text is recomputed on every hover event so updating the
326 | title attribute will have the expected effect.
327 |
328 |
329 |
330 |
Download
331 |
332 |
Package
333 |
334 | Package downloads are available from the
335 | Github project page -
336 | select the latest version from the 'Switch Tags' menu then click 'Downloads'.
337 |