').appendTo(this.$tipsy);
183 | this.$tip.data('rootel', this.$el);
184 | var e = this.$el;
185 | var t = this.$tip;
186 | this.$tip.html(this.settings.content != '' ? (typeof this.settings.content == 'string' ? this.settings.content : this.settings.content(e, t)) : this.title);
187 | },
188 |
189 | offset: function (el) {
190 | return this.$el[0].getBoundingClientRect();
191 | },
192 |
193 | destroy: function () {
194 | if (this.$tipsy) {
195 | this.$tipsy.remove();
196 | $.removeData(this.$el, 'tooltipsy');
197 | }
198 | },
199 |
200 | defaults: {
201 | alignTo: 'element',
202 | offset: [0, -1],
203 | content: '',
204 | show: function (e, $el) {
205 | $el.fadeIn(100);
206 | },
207 | hide: function (e, $el) {
208 | $el.fadeOut(100);
209 | },
210 | css: {},
211 | className: 'tooltipsy',
212 | delay: 200,
213 | showEvent: 'mouseenter',
214 | hideEvent: 'mouseleave'
215 | }
216 | };
217 |
218 | $.fn.tooltipsy = function(options) {
219 | return this.each(function() {
220 | new $.tooltipsy(this, options);
221 | });
222 | };
223 |
224 | })(jQuery);
225 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 |
2 | /* tooltipsy by Brian Cray
3 | * Lincensed under GPL2 - http://www.gnu.org/licenses/gpl-2.0.html
4 | * Option quick reference:
5 | * - alignTo: "element" or "cursor" (Defaults to "element")
6 | * - offset: Tooltipsy distance from element or mouse cursor, dependent on alignTo setting. Set as array [x, y] (Defaults to [0, -1])
7 | * - content: HTML or text content of tooltip. Defaults to "" (empty string), which pulls content from target element's title attribute
8 | * - show: function(event, tooltip) to show the tooltip. Defaults to a show(100) effect
9 | * - hide: function(event, tooltip) to hide the tooltip. Defaults to a fadeOut(100) effect
10 | * - delay: A delay in milliseconds before showing a tooltip. Set to 0 for no delay. Defaults to 200
11 | * - css: object containing CSS properties and values. Defaults to {} to use stylesheet for styles
12 | * - className: DOM class for styling tooltips with CSS. Defaults to "tooltipsy"
13 | * - showEvent: Set a custom event to bind the show function. Defaults to mouseenter
14 | * - hideEvent: Set a custom event to bind the show function. Defaults to mouseleave
15 | * Method quick reference:
16 | * - $('element').data('tooltipsy').show(): Force the tooltip to show
17 | * - $('element').data('tooltipsy').hide(): Force the tooltip to hide
18 | * - $('element').data('tooltipsy').destroy(): Remove tooltip from DOM
19 | * More information visit http://tooltipsy.com/
20 | */
21 |
22 |
23 | (function (factory) {
24 | 'use strict';
25 | if (typeof define === 'function' && define.amd) {
26 | // Register as an anonymous AMD module:
27 | define([
28 | 'jquery'
29 | ], factory);
30 | } else if (typeof exports === 'object') {
31 | // Node/CommonJS:
32 | factory(
33 | require('jquery')
34 | );
35 | } else {
36 | // Browser globals:
37 | if (!(typeof jQuery === 'undefined' || typeof window.jQuery === 'undefined')) {
38 | factory(window.jQuery || jQuery);
39 | }
40 | }
41 | }(function ($) {
42 | $.tooltipsy = function (el, options) {
43 | this.options = options;
44 | this.$el = $(el);
45 | this.title = this.$el.attr('title') || '';
46 | this.$el.attr('title', '');
47 | this.random = parseInt(Math.random()*10000);
48 | this.ready = false;
49 | this.shown = false;
50 | this.width = 0;
51 | this.height = 0;
52 | this.delaytimer = null;
53 |
54 | this.$el.data("tooltipsy", this);
55 | this.init();
56 | };
57 |
58 | $.tooltipsy.prototype = {
59 | init: function () {
60 | var base = this,
61 | settings,
62 | $el = base.$el,
63 | el = $el[0];
64 |
65 | base.settings = settings = $.extend({}, base.defaults, base.options);
66 | settings.delay = +settings.delay;
67 |
68 | if (typeof settings.content === 'function') {
69 | base.readify();
70 | }
71 |
72 | if (settings.showEvent === settings.hideEvent && settings.showEvent === 'click') {
73 | $el.toggle(function (e) {
74 | if (settings.showEvent === 'click' && el.tagName == 'A') {
75 | e.preventDefault();
76 | }
77 | if (settings.delay > 0) {
78 | base.delaytimer = window.setTimeout(function () {
79 | base.show(e);
80 | }, settings.delay);
81 | }
82 | else {
83 | base.show(e);
84 | }
85 | }, function (e) {
86 | if (settings.showEvent === 'click' && el.tagName == 'A') {
87 | e.preventDefault();
88 | }
89 | window.clearTimeout(base.delaytimer);
90 | base.delaytimer = null;
91 | base.hide(e);
92 | });
93 | }
94 | else {
95 | $el.bind(settings.showEvent, function (e) {
96 | if (settings.showEvent === 'click' && el.tagName == 'A') {
97 | e.preventDefault();
98 | }
99 | base.delaytimer = window.setTimeout(function () {
100 | base.show(e);
101 | }, settings.delay || 0);
102 | }).bind(settings.hideEvent, function (e) {
103 | if (settings.showEvent === 'click' && el.tagName == 'A') {
104 | e.preventDefault();
105 | }
106 | window.clearTimeout(base.delaytimer);
107 | base.delaytimer = null;
108 | base.hide(e);
109 | });
110 | }
111 | },
112 |
113 | show: function (e) {
114 | if (this.ready === false) {
115 | this.readify();
116 | }
117 |
118 | var base = this,
119 | settings = base.settings,
120 | $tipsy = base.$tipsy,
121 | $el = base.$el,
122 | el = $el[0],
123 | offset = base.offset(el);
124 |
125 | if (base.shown === false) {
126 | if ((function (o) {
127 | var s = 0, k;
128 | for (k in o) {
129 | if (o.hasOwnProperty(k)) {
130 | s++;
131 | }
132 | }
133 | return s;
134 | })(settings.css) > 0) {
135 | base.$tip.css(settings.css);
136 | }
137 | base.width = $tipsy.outerWidth();
138 | base.height = $tipsy.outerHeight();
139 | }
140 |
141 | if (settings.alignTo === 'cursor' && e) {
142 | var tip_position = [e.clientX + settings.offset[0], e.clientY + settings.offset[1]];
143 | if (tip_position[0] + base.width > $(window).width()) {
144 | var tip_css = {top: tip_position[1] + 'px', right: tip_position[0] + 'px', left: 'auto'};
145 | }
146 | else {
147 | var tip_css = {top: tip_position[1] + 'px', left: tip_position[0] + 'px', right: 'auto'};
148 | }
149 | }
150 | else {
151 | var tip_position = [
152 | (function () {
153 | if (settings.offset[0] < 0) {
154 | return offset.left - Math.abs(settings.offset[0]) - base.width;
155 | }
156 | else if (settings.offset[0] === 0) {
157 | return offset.left - ((base.width - $el.outerWidth()) / 2);
158 | }
159 | else {
160 | return offset.left + $el.outerWidth() + settings.offset[0];
161 | }
162 | })(),
163 | (function () {
164 | if (settings.offset[1] < 0) {
165 | return offset.top - Math.abs(settings.offset[1]) - base.height;
166 | }
167 | else if (settings.offset[1] === 0) {
168 | return offset.top - ((base.height - base.$el.outerHeight()) / 2);
169 | }
170 | else {
171 | return offset.top + base.$el.outerHeight() + settings.offset[1];
172 | }
173 | })()
174 | ];
175 | }
176 | $tipsy.css({top: tip_position[1] + 'px', left: tip_position[0] + 'px'});
177 | base.settings.show(e, $tipsy.stop(true, true));
178 | },
179 |
180 | hide: function (e) {
181 | var base = this;
182 |
183 | if (base.ready === false) {
184 | return;
185 | }
186 |
187 | if (e && e.relatedTarget === base.$tip[0]) {
188 | base.$tip.bind('mouseleave', function (e) {
189 | if (e.relatedTarget === base.$el[0]) {
190 | return;
191 | }
192 | base.settings.hide(e, base.$tipsy.stop(true, true));
193 | });
194 | return;
195 | }
196 | base.settings.hide(e, base.$tipsy.stop(true, true));
197 | },
198 |
199 | readify: function () {
200 | this.ready = true;
201 | this.$tipsy = $('