Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

live() is deprecated un jQuery 1.7. Use on() instead. #126

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

live() is deprecated un jQuery 1.7. Use on() instead. #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3c9e97e
Add 'hoverable' trigger: hovered tooltip stays put.
henrik Sep 15, 2011
caeb3f3
README cleanup.
henrik Sep 15, 2011
bff3301
Make 'hoverable' a separate options. Also works with focus. Fix bug.
henrik Sep 15, 2011
59f903c
Handle super-long unbroken strings
Sep 7, 2012
0879cae
Add basic ARIA support
Sep 20, 2012
f46a127
Made ARIA optional and attribute removed during hide as it is invalid…
Sep 24, 2012
bde14a4
ARIA option documentation
Sep 24, 2012
e6550b3
Merge pull request #1 from hitsthings/patch-1
Nov 9, 2012
9c01f31
Merge pull request #2 from cheshrkat/master
Nov 9, 2012
05d962d
Merge pull request #3 from henrik/master
Nov 9, 2012
a044144
Move declaration of functions above invocations
Nov 9, 2012
185f8e8
Reduce default delayOut to 20ms if hoverable is enabled to reduce lag
Nov 25, 2012
1fc35b9
Avoid using the .live() method, because it's deprecated
Dec 11, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 9 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Facebook-style tooltip plugin for jQuery

(c) 2008-2010 Jason Frame (jason@onehackoranother.com)
(c) 2008-2011 Jason Frame (jason@onehackoranother.com)

Released under The MIT License.

Expand All @@ -20,30 +20,29 @@ http://onehackoranother.com/projects/jquery/tipsy

Hosted at GitHub; browse at:

http://github.com/jaz303/tipsy/tree/master
<http://github.com/jaz303/tipsy/tree/master>

Or clone from:

git://github.com/jaz303/tipsy.git

## Usage:

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.
1. Copy the contents of `src/{javascripts,stylesheets}` to the corresponding asset directories in your project.

2. Insert the necessary elements in your document's `<head>` section, e.g.:

2. Insert the neccesary elements in your document's `<head>` section, e.g.:

<script type='text/javascript' src='/javascripts/jquery.tipsy.js'></script>
<link rel="stylesheet" href="/stylesheets/tipsy.css" type="text/css" />

Remember to include jquery.tipsy.js *after* including the main jQuery library.

3. Initialise Tipsy in your document.onload, e.g.:
3. Initialise Tipsy in your DOM ready handler, e.g.:

<script type='text/javascript'>
$(function() {
$('a[rel=tipsy]').tipsy({fade: true, gravity: 'n'});
});
$(function() {
$('a[rel=tipsy]').tipsy({fade: true, gravity: 'n'});
});
</script>

Please refer to the docs directory for more examples and documentation.
Expand Down
52 changes: 52 additions & 0 deletions docs/src/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,32 @@ an anchor tag's title attribute.</p>
&lt;script type=&#x27;text/javascript&#x27;&gt;
$(&#x27;#manual-example a[rel=tipsy]&#x27;).tipsy({trigger: &#x27;manual&#x27;});
&lt;/script&gt;</pre></div>

<!-- Hoverable -->

<h3>Hoverable Tooltips</h3>

<p>
If you set <code>hoverable: true</code>, the tooltip will stick around if you hover over it or interact with it, not just if you hover/focus its element.
This can be useful for tooltips containing things like clickable links.
</p>
<p>If you don't set a <code>delayOut</code>, it will default to 200.</p>

<div class='caption'>Example:</div>

<p>
<a id='hoverable-example' title='I have <a href="#foo">a link</a>' href='#'>Hover me</a>
</p>

<script type='text/javascript'>
$('#hoverable-example').tipsy({html: true, hoverable:true});
</script>

<p>Code:</p>
<div class='code'><pre>&lt;script type='text/javascript'&gt;
$('#hoverable-example').tipsy({html: true, hoverable: true});
&lt;/script&gt;</pre></div>


<!-- Live Events Support -->

Expand All @@ -294,12 +320,37 @@ an anchor tag's title attribute.</p>
<div class='code'><pre>&lt;script type=&#x27;text/javascript&#x27;&gt;
$(&#x27;a.live-tipsy&#x27;).tipsy({live: true});
&lt;/script&gt;</pre></div>

<!-- ARIA attribute Support -->

<h3>Support for ARIA attributes</h3>

<p>
ARIA attributes are supported using the option <code>{aria: true}</code>.
The tooltip trigger must have a parent set to <code>role=&quot;application&quot;</code> or <code>role=&quot;document&quot;</code> and the tooltip should be enabled on focus (screen reader users are most likely to be using the keyboard).
</p>
<p>
The tooltip will be set to <code>role=&quot;tooltip&quot;</code> and the trigger will be linked to the tooltip with <code>aria-describedby</code> (using a generated ID).
</p>

<p role='application'><a id='aria-example' href='#' title='You should hear this text in screen readers'>Tooltip with ARIA</a></p>

<div class='caption'>Aria example:</div>
<div class='code'><pre>$('#aria-example').tipsy({aria: true});</pre></div>

<script type='text/javascript'>
$(function() {
$("#aria-example").tipsy({trigger: "focus", aria: true});
$("#aria-example").tipsy({trigger: "hover", aria: true});
});
</script>

<!-- Options -->

<h2 id="options">Summary of Configuration Options</h2>
<p>Here is the default options declaration:
<div class='code'><pre>$.fn.tipsy.defaults = {
aria: false, // add ARIA attributes? (note dependencies)
className: null, // custom class to add to tooltip (string or function)
delayIn: 0, // delay before showing tooltip (ms)
delayOut: 0, // delay before hiding tooltip (ms)
Expand All @@ -308,6 +359,7 @@ an anchor tag's title attribute.</p>
gravity: 'n', // gravity (string or function)
html: false, // is tooltip content HTML?
live: false, // use live event support?
hoverable: false, // keep tooltip around when hovered/interacted with?
offset: 0, // pixel offset of tooltip from element
opacity: 0.8, // opacity of tooltip
title: 'title', // attribute/callback containing tooltip text
Expand Down
79 changes: 60 additions & 19 deletions src/javascripts/jquery.tipsy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@
}
return false;
};

var tipsyIDcounter = 0;
function tipsyID() {
var tipsyID = tipsyIDcounter++;
return "tipsyuid" + tipsyID;
};

function Tipsy(element, options) {
this.$element = $(element);
Expand All @@ -32,7 +38,25 @@
$tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
$tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
$tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);


var that = this;
function tipOver() {
that.hoverTooltip = true;
}
function tipOut() {
if (that.hoverState == 'in') return; // If field is still focused.
that.hoverTooltip = false;
if (that.options.trigger != 'manual') {
var eventOut = that.options.trigger == 'hover' ? 'mouseleave.tipsy' : 'blur.tipsy';
that.$element.trigger(eventOut);
}
}

if (this.options.hoverable) {
$tip.hover(tipOver, tipOut);
}

var pos = $.extend({}, this.$element.offset(), {
width: this.$element[0].offsetWidth,
height: this.$element[0].offsetHeight
Expand Down Expand Up @@ -77,6 +101,12 @@
} else {
$tip.css({visibility: 'visible', opacity: this.options.opacity});
}

if (this.options.aria) {
var $tipID = tipsyID();
$tip.attr("id", $tipID);
this.$element.attr("aria-describedby", $tipID);
}
}
},

Expand All @@ -86,6 +116,9 @@
} else {
this.tip().remove();
}
if (this.options.aria) {
this.$element.removeAttr("aria-describedby");
}
},

fixTitle: function() {
Expand All @@ -110,7 +143,7 @@

tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>').attr("role","tooltip");
this.$tip.data('tipsy-pointee', this.$element[0]);
}
return this.$tip;
Expand Down Expand Up @@ -140,6 +173,9 @@
}

options = $.extend({}, $.fn.tipsy.defaults, options);
if (options.hoverable) {
options.delayOut = options.delayOut || 20;
}

function get(ele) {
var tipsy = $.data(ele, 'tipsy');
Expand Down Expand Up @@ -167,24 +203,28 @@
if (options.delayOut == 0) {
tipsy.hide();
} else {
setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut);
setTimeout(function() { if (tipsy.hoverState == 'out' && !tipsy.hoverTooltip) tipsy.hide(); }, options.delayOut);
}
};

if (!options.live) this.each(function() { get(this); });

if (options.trigger != 'manual') {
var binder = options.live ? 'live' : 'bind',
eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',
eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
this[binder](eventIn, enter)[binder](eventOut, leave);
var eventIn = options.trigger == 'hover' ? 'mouseenter.tipsy' : 'focus.tipsy',
eventOut = options.trigger == 'hover' ? 'mouseleave.tipsy' : 'blur.tipsy';
if (options.live) {
$(this.context).on(eventIn, this.selector, enter).on(eventOut, this.selector, leave);
} else {
this.bind(eventIn, enter).bind(eventOut, leave);
}
}

return this;

};

$.fn.tipsy.defaults = {
aria: false,
className: null,
delayIn: 0,
delayOut: 0,
Expand All @@ -193,6 +233,7 @@
gravity: 'n',
html: false,
live: false,
hoverable: false,
offset: 0,
opacity: 0.8,
title: 'title',
Expand Down Expand Up @@ -240,19 +281,19 @@
* component.
*/
$.fn.tipsy.autoBounds = function(margin, prefer) {
return function() {
var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
boundTop = $(document).scrollTop() + margin,
boundLeft = $(document).scrollLeft() + margin,
$this = $(this);
return function() {
var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
boundTop = $(document).scrollTop() + margin,
boundLeft = $(document).scrollLeft() + margin,
$this = $(this);

if ($this.offset().top < boundTop) dir.ns = 'n';
if ($this.offset().left < boundLeft) dir.ew = 'w';
if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';
if ($this.offset().top < boundTop) dir.ns = 'n';
if ($this.offset().left < boundLeft) dir.ew = 'w';
if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';

return dir.ns + (dir.ew ? dir.ew : '');
}
};
return dir.ns + (dir.ew ? dir.ew : '');
}
};

})(jQuery);
})(jQuery);
2 changes: 1 addition & 1 deletion src/stylesheets/tipsy.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
.tipsy { font-size: 10px; position: absolute; padding: 5px; word-wrap: break-word; z-index: 100000; }
.tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }

/* Rounded corners */
Expand Down