Permalink
Browse files

Can now set custom show and hide events

  • Loading branch information...
1 parent 6c833cf commit 974f4edcd756351f61bbb6949e55e61883d08bcd Brian Cray committed Sep 7, 2011
Showing with 50 additions and 7 deletions.
  1. +39 −2 README
  2. +1 −1 tooltipsy.min.js
  3. +10 −4 tooltipsy.source.js
View
41 README
@@ -2,7 +2,27 @@ tooltipsy by Brian Cray
Lincensed under GPL2 - http://www.gnu.org/licenses/gpl-2.0.html
-Option quick reference:
+HOW TO (THE EASY METHOD):
+
+1. Identify the HTML element that will trigger a tooltip, such as:
+ <a href="#">Foobar</a>
+2. Add a class name and title to the element
+ <a href="#" class="hastip" title="I am the tooltip text">Foobar</a>
+3. Link to it with jQuery
+ $('.hastip').tooltipsy();
+4. Style it with CSS however you like, for example:
+ .tooltipsy
+ {
+ padding: 10px;
+ max-width: 200px;
+ color: #303030;
+ background-color: #f5f5b5;
+ border: 1px solid #deca7e;
+ }
+5. Enjoy lovely tooltips
+
+OPTION QUICK REFERENCE:
+
- alignTo: "element" or "cursor" (Defaults to "element")
- offset: Tooltipsy distance from element or mouse cursor, dependent on alignTo setting. Set as array [x, y] (Defaults to [0, -1])
- content: HTML or text content of tooltip. Defaults to "" (empty string), which pulls content from target element's title attribute
@@ -12,4 +32,21 @@ Option quick reference:
- css: object containing CSS properties and values. Defaults to {} to use stylesheet for styles
- className: DOM class for styling tooltips with CSS. Defaults to "tooltipsy"
-More information visit http://tooltipsy.com/
+OTHER GREAT THINGS TO KNOW:
+
+- You can destroy the tooltip with:
+ $('.hastip').data('tooltip').destroy();
+ ^ make sure that is the original element you attached tooltipsy to
+
+- You can use ajax, for example:
+ $('.hastip').tooltipsy({
+ content: function () {
+ var $el = $(this);
+ $.get('api.php', function (data) {
+ $el.html(data).show();
+ });
+ return 'Fallback content';
+ }
+ });
+
+MORE INFORMATION VISIT http://tooltipsy.com/
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -39,7 +39,7 @@
base.readify();
}
- base.$el.bind('mouseenter', function (e) {
+ base.$el.bind(base.settings.showEvent, function (e) {
if (base.settings.delay > 0) {
base.delaytimer = window.setTimeout(function () {
base.enter(e);
@@ -48,7 +48,7 @@
else {
base.enter(e);
}
- }).bind('mouseleave', function (e) {
+ }).bind(base.settings.hideEvent, function (e) {
window.clearTimeout(base.delaytimer);
base.delaytimer = null;
base.leave(e);
@@ -150,7 +150,11 @@
} while (el = el.offsetParent);
}
return {left : ol, top : ot};
- }
+ };
+
+ $.tooltipsy.prototype.destroy = function () {
+ this.$tispy.remove();
+ };
$.tooltipsy.prototype.defaults = {
alignTo: 'element',
@@ -164,7 +168,9 @@
},
css: {},
className: 'tooltipsy',
- delay: 200
+ delay: 200,
+ showEvent: 'mouseenter',
+ hideEvent: 'mouseleave'
};
$.fn.tooltipsy = function(options) {

0 comments on commit 974f4ed

Please sign in to comment.