Skip to content
This repository

Added close-on-click option and associated callback #66

Open
wants to merge 5 commits into from

2 participants

James R. Odin Dutton
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.

Showing 3 changed files with 92 additions and 64 deletions. Show diff stats Hide diff stats

  1. +0 50 README
  2. +53 0 README.md
  3. +39 14 src/javascripts/jquery.tipsy.js
50 README
... ... @@ -1,50 +0,0 @@
1   -tipsy - Facebook-style tooltip plugin for jQuery
2   - (c) 2008-2010 Jason Frame (jason@onehackoranother.com)
3   - Released under The MIT License.
4   -
5   -== DESCRIPTION:
6   -
7   -tipsy is a simple jQuery plugin for generating Facebook-style tooltips.
8   -
9   -It's used by Twitter, Github, Slideshare and Bitbucket, amongst others.
10   -
11   -== HOMEPAGE:
12   -
13   -http://onehackoranother.com/projects/jquery/tipsy
14   -
15   -== SOURCE:
16   -
17   -Hosted at GitHub; browse at:
18   -
19   - http://github.com/jaz303/tipsy/tree/master
20   -
21   -Or clone from:
22   -
23   - git://github.com/jaz303/tipsy.git
24   -
25   -== USAGE:
26   -
27   -1. Copy the contents of src/{images,javascripts,stylesheets} to the corresponding asset directories in your project. If the relative path of your images directory from your stylesheets directory is not "../images", you'll need to adjust tipsy.css appropriately.
28   -
29   -2. Insert the neccesary elements in your document's <head> section, e.g.:
30   -
31   -<script type='text/javascript' src='/javascripts/jquery.tipsy.js'></script>
32   -<link rel="stylesheet" href="/stylesheets/tipsy.css" type="text/css" />
33   -
34   -Remember to include jquery.tipsy.js *after* including the main jQuery library.
35   -
36   -3. Initialise Tipsy in your document.onload, e.g.:
37   -
38   -<script type='text/javascript'>
39   - $(function() {
40   - $('a[rel=tipsy]').tipsy({fade: true, gravity: 'n'});
41   - });
42   -</script>
43   -
44   -Please refer to the docs directory for more examples and documentation.
45   -
46   -== A NOTE ON FORKING:
47   -
48   -By forking this project you hereby grant permission for any commits to your fork to be
49   -merged back into this repository and, with attribution, be released under the terms of
50   -the MIT License.
53 README.md
Source Rendered
... ... @@ -0,0 +1,53 @@
  1 +# tipsy - Facebook-style tooltip plugin for jQuery
  2 +
  3 +(c) 2008-2010 Jason Frame (jason@onehackoranother.com)
  4 +Released under The MIT License.
  5 +
  6 +## DESCRIPTION:
  7 +
  8 +tipsy is a simple jQuery plugin for generating Facebook-style tooltips.
  9 +
  10 +It's used by Twitter, Github, Slideshare and Bitbucket, amongst others.
  11 +
  12 +## HOMEPAGE:
  13 +
  14 +http://onehackoranother.com/projects/jquery/tipsy
  15 +
  16 +## SOURCE:
  17 +
  18 +Hosted at GitHub; browse at: [http://github.com/jaz303/tipsy/tree/master](http://github.com/jaz303/tipsy/tree/master)
  19 +
  20 +Or clone from: `git://github.com/jaz303/tipsy.git`
  21 +
  22 +## USAGE:
  23 +
  24 +#### 1. Copy
  25 +
  26 +Copy the contents of src/{images,javascripts,stylesheets} to the corresponding asset directories in your project. If the relative path of your images directory from your stylesheets directory is not "../images", you'll need to adjust tipsy.css appropriately.
  27 +
  28 +#### 2. Insert
  29 +
  30 +Insert the necessary elements in your document's <head> section, e.g.:
  31 +
  32 + <script type='text/javascript' src='/javascripts/jquery.tipsy.js'></script>
  33 + <link rel="stylesheet" href="/stylesheets/tipsy.css" type="text/css" />
  34 +
  35 +Remember to include jquery.tipsy.js *after* including the main jQuery library.
  36 +
  37 +#### 3. Initialise
  38 +
  39 +Initialise Tipsy in your document.onload, e.g.:
  40 +
  41 + <script type='text/javascript'>
  42 + $(function() {
  43 + $('a[rel=tipsy]').tipsy({fade: true, gravity: 'n'});
  44 + });
  45 + </script>
  46 +
  47 +Please refer to the docs directory for more examples and documentation.
  48 +
  49 +## A NOTE ON FORKING:
  50 +
  51 +By forking this project you hereby grant permission for any commits to your fork to be
  52 +merged back into this repository and, with attribution, be released under the terms of
  53 +the MIT License.
53 src/javascripts/jquery.tipsy.js
... ... @@ -1,3 +1,6 @@
  1 +// Forked by james - added close on click
  2 +
  3 +
1 4 // tipsy, facebook style tooltips for jquery
2 5 // version 1.0.0a
3 6 // (c) 2008-2010 jason frame [jason@onehackoranother.com]
@@ -70,8 +73,27 @@
70 73 } else {
71 74 $tip.css({visibility: 'visible', opacity: this.options.opacity});
72 75 }
  76 +
  77 + if (this.options.clickClose) {
  78 + $tip.bind('click', {element: this.$element, callback: this.options.closeCallback}, function(event) {
  79 + event.data.element.tipsy('hide');
  80 + if (event.data.callback) {
  81 + event.data.callback();
  82 + }
  83 + });
  84 + }
73 85 }
74 86 },
  87 +
  88 + showTimed: function() {
  89 + var self = this;
  90 + self.show();
  91 + self.$element.delay(this.options.timerLength)
  92 + .queue(function(next) {
  93 + self.hide();
  94 + next();
  95 + });
  96 + },
75 97
76 98 hide: function() {
77 99 if (this.options.fade) {
@@ -188,7 +210,10 @@
188 210 offset: 0,
189 211 opacity: 0.8,
190 212 title: 'title',
191   - trigger: 'hover'
  213 + trigger: 'hover',
  214 + clickClose: false,
  215 + closeCallback: null,
  216 + timerLength: 3 * 1000
192 217 };
193 218
194 219 // Overwrite this method to provide options on a per-element basis.
@@ -217,25 +242,25 @@
217 242 * @param prefer (string, e.g. 'n', 'sw', 'w') - the direction to prefer
218 243 * if there are no viewable region edges effecting the tooltip's
219 244 * gravity. It will try to vary from this minimally, for example,
220   - * if 'sw' is preferred and an element is near the right viewable
  245 + * if 'sw' is preferred and an element is near the right viewable
221 246 * region edge, but not the top edge, it will set the gravity for
222 247 * that element's tooltip to be 'se', preserving the southern
223 248 * component.
224 249 */
225 250 $.fn.tipsy.autoBounds = function(margin, prefer) {
226   - return function() {
227   - var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
228   - boundTop = $(document).scrollTop() + margin,
229   - boundLeft = $(document).scrollLeft() + margin,
230   - $this = $(this);
  251 + return function() {
  252 + var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
  253 + boundTop = $(document).scrollTop() + margin,
  254 + boundLeft = $(document).scrollLeft() + margin,
  255 + $this = $(this);
231 256
232   - if ($this.offset().top < boundTop) dir.ns = 'n';
233   - if ($this.offset().left < boundLeft) dir.ew = 'w';
234   - if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
235   - if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';
  257 + if ($this.offset().top < boundTop) dir.ns = 'n';
  258 + if ($this.offset().left < boundLeft) dir.ew = 'w';
  259 + if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
  260 + if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';
236 261
237   - return dir.ns + (dir.ew ? dir.ew : '');
238   - }
239   - };
  262 + return dir.ns + (dir.ew ? dir.ew : '');
  263 + };
  264 + };
240 265
241 266 })(jQuery);

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.