1 /* |
|
2 * jQuery Tooltip plugin 1.3 |
|
3 * |
|
4 * http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ |
|
5 * http://docs.jquery.com/Plugins/Tooltip |
|
6 * |
|
7 * Copyright (c) 2006 - 2008 Jörn Zaefferer |
|
8 * |
|
9 * $Id: jquery.tooltip.js 5741 2008-06-21 15:22:16Z joern.zaefferer $ |
|
10 * |
|
11 * Dual licensed under the MIT and GPL licenses: |
|
12 * http://www.opensource.org/licenses/mit-license.php |
|
13 * http://www.gnu.org/licenses/gpl.html |
|
14 */ |
|
15 |
|
16 ;(function($) { |
|
17 |
|
18 // the tooltip element |
|
19 var helper = {}, |
|
20 // the current tooltipped element |
|
21 current, |
|
22 // the title of the current element, used for restoring |
|
23 title, |
|
24 // timeout id for delayed tooltips |
|
25 tID, |
|
26 // IE 5.5 or 6 |
|
27 IE = $.browser.msie && /MSIE\s(5\.5|6\.)/.test(navigator.userAgent), |
|
28 // flag for mouse tracking |
|
29 track = false; |
|
30 |
|
31 $.tooltip = { |
|
32 blocked: false, |
|
33 defaults: { |
|
34 delay: 200, |
|
35 fade: false, |
|
36 showURL: true, |
|
37 extraClass: "", |
|
38 top: 15, |
|
39 left: 15, |
|
40 id: "tooltip" |
|
41 }, |
|
42 block: function() { |
|
43 $.tooltip.blocked = !$.tooltip.blocked; |
|
44 } |
|
45 }; |
|
46 |
|
47 $.fn.extend({ |
|
48 tooltip: function(settings) { |
|
49 settings = $.extend({}, $.tooltip.defaults, settings); |
|
50 createHelper(settings); |
|
51 return this.each(function() { |
|
52 $.data(this, "tooltip", settings); |
|
53 this.tOpacity = helper.parent.css("opacity"); |
|
54 // copy tooltip into its own expando and remove the title |
|
55 this.tooltipText = this.title; |
|
56 $(this).removeAttr("title"); |
|
57 // also remove alt attribute to prevent default tooltip in IE |
|
58 this.alt = ""; |
|
59 }) |
|
60 .mouseover(save) |
|
61 .mouseout(hide) |
|
62 .click(hide); |
|
63 }, |
|
64 fixPNG: IE ? function() { |
|
65 return this.each(function () { |
|
66 var image = $(this).css('backgroundImage'); |
|
67 if (image.match(/^url\(["']?(.*\.png)["']?\)$/i)) { |
|
68 image = RegExp.$1; |
|
69 $(this).css({ |
|
70 'backgroundImage': 'none', |
|
71 'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')" |
|
72 }).each(function () { |
|
73 var position = $(this).css('position'); |
|
74 if (position != 'absolute' && position != 'relative') |
|
75 $(this).css('position', 'relative'); |
|
76 }); |
|
77 } |
|
78 }); |
|
79 } : function() { return this; }, |
|
80 unfixPNG: IE ? function() { |
|
81 return this.each(function () { |
|
82 $(this).css({'filter': '', backgroundImage: ''}); |
|
83 }); |
|
84 } : function() { return this; }, |
|
85 hideWhenEmpty: function() { |
|
86 return this.each(function() { |
|
87 $(this)[ $(this).html() ? "show" : "hide" ](); |
|
88 }); |
|
89 }, |
|
90 url: function() { |
|
91 return this.attr('href') || this.attr('src'); |
|
92 } |
|
93 }); |
|
94 |
|
95 function createHelper(settings) { |
|
96 // there can be only one tooltip helper |
|
97 if( helper.parent ) |
|
98 return; |
|
99 // create the helper, h3 for title, div for url |
|
100 helper.parent = $('<div id="' + settings.id + '"><h3></h3><div class="body"></div><div class="url"></div></div>') |
|
101 // add to document |
|
102 .appendTo(document.body) |
|
103 // hide it at first |
|
104 .hide(); |
|
105 |
|
106 // apply bgiframe if available |
|
107 if ( $.fn.bgiframe ) |
|
108 helper.parent.bgiframe(); |
|
109 |
|
110 // save references to title and url elements |
|
111 helper.title = $('h3', helper.parent); |
|
112 helper.body = $('div.body', helper.parent); |
|
113 helper.url = $('div.url', helper.parent); |
|
114 } |
|
115 |
|
116 function settings(element) { |
|
117 return $.data(element, "tooltip"); |
|
118 } |
|
119 |
|
120 // main event handler to start showing tooltips |
|
121 function handle(event) { |
|
122 // show helper, either with timeout or on instant |
|
123 if( settings(this).delay ) |
|
124 tID = setTimeout(show, settings(this).delay); |
|
125 else |
|
126 show(); |
|
127 |
|
128 // if selected, update the helper position when the mouse moves |
|
129 track = !!settings(this).track; |
|
130 $(document.body).bind('mousemove', update); |
|
131 |
|
132 // update at least once |
|
133 update(event); |
|
134 } |
|
135 |
|
136 // save elements title before the tooltip is displayed |
|
137 function save() { |
|
138 // if this is the current source, or it has no title (occurs with click event), stop |
|
139 if ( $.tooltip.blocked || this == current || (!this.tooltipText && !settings(this).bodyHandler) ) |
|
140 return; |
|
141 |
|
142 // save current |
|
143 current = this; |
|
144 title = this.tooltipText; |
|
145 |
|
146 if ( settings(this).bodyHandler ) { |
|
147 helper.title.hide(); |
|
148 var bodyContent = settings(this).bodyHandler.call(this); |
|
149 if (bodyContent.nodeType || bodyContent.jquery) { |
|
150 helper.body.empty().append(bodyContent) |
|
151 } else { |
|
152 helper.body.html( bodyContent ); |
|
153 } |
|
154 helper.body.show(); |
|
155 } else if ( settings(this).showBody ) { |
|
156 var parts = title.split(settings(this).showBody); |
|
157 helper.title.html(parts.shift()).show(); |
|
158 helper.body.empty(); |
|
159 for(var i = 0, part; (part = parts[i]); i++) { |
|
160 if(i > 0) |
|
161 helper.body.append("<br/>"); |
|
162 helper.body.append(part); |
|
163 } |
|
164 helper.body.hideWhenEmpty(); |
|
165 } else { |
|
166 helper.title.html(title).show(); |
|
167 helper.body.hide(); |
|
168 } |
|
169 |
|
170 // if element has href or src, add and show it, otherwise hide it |
|
171 if( settings(this).showURL && $(this).url() ) |
|
172 helper.url.html( $(this).url().replace('http://', '') ).show(); |
|
173 else |
|
174 helper.url.hide(); |
|
175 |
|
176 // add an optional class for this tip |
|
177 helper.parent.addClass(settings(this).extraClass); |
|
178 |
|
179 // fix PNG background for IE |
|
180 if (settings(this).fixPNG ) |
|
181 helper.parent.fixPNG(); |
|
182 |
|
183 handle.apply(this, arguments); |
|
184 } |
|
185 |
|
186 // delete timeout and show helper |
|
187 function show() { |
|
188 tID = null; |
|
189 if ((!IE || !$.fn.bgiframe) && settings(current).fade) { |
|
190 if (helper.parent.is(":animated")) |
|
191 helper.parent.stop().show().fadeTo(settings(current).fade, current.tOpacity); |
|
192 else |
|
193 helper.parent.is(':visible') ? helper.parent.fadeTo(settings(current).fade, current.tOpacity) : helper.parent.fadeIn(settings(current).fade); |
|
194 } else { |
|
195 helper.parent.show(); |
|
196 } |
|
197 update(); |
|
198 } |
|
199 |
|
200 /** |
|
201 * callback for mousemove |
|
202 * updates the helper position |
|
203 * removes itself when no current element |
|
204 */ |
|
205 function update(event) { |
|
206 if($.tooltip.blocked) |
|
207 return; |
|
208 |
|
209 if (event && event.target.tagName == "OPTION") { |
|
210 return; |
|
211 } |
|
212 |
|
213 // stop updating when tracking is disabled and the tooltip is visible |
|
214 if ( !track && helper.parent.is(":visible")) { |
|
215 $(document.body).unbind('mousemove', update) |
|
216 } |
|
217 |
|
218 // if no current element is available, remove this listener |
|
219 if( current == null ) { |
|
220 $(document.body).unbind('mousemove', update); |
|
221 return; |
|
222 } |
|
223 |
|
224 // remove position helper classes |
|
225 helper.parent.removeClass("viewport-right").removeClass("viewport-bottom"); |
|
226 |
|
227 var left = helper.parent[0].offsetLeft; |
|
228 var top = helper.parent[0].offsetTop; |
|
229 if (event) { |
|
230 // position the helper 15 pixel to bottom right, starting from mouse position |
|
231 left = event.pageX + settings(current).left; |
|
232 top = event.pageY + settings(current).top; |
|
233 var right='auto'; |
|
234 if (settings(current).positionLeft) { |
|
235 right = $(window).width() - left; |
|
236 left = 'auto'; |
|
237 } |
|
238 helper.parent.css({ |
|
239 left: left, |
|
240 right: right, |
|
241 top: top |
|
242 }); |
|
243 } |
|
244 |
|
245 var v = viewport(), |
|
246 h = helper.parent[0]; |
|
247 // check horizontal position |
|
248 if (v.x + v.cx < h.offsetLeft + h.offsetWidth) { |
|
249 left -= h.offsetWidth + 20 + settings(current).left; |
|
250 helper.parent.css({left: left + 'px'}).addClass("viewport-right"); |
|
251 } |
|
252 // check vertical position |
|
253 if (v.y + v.cy < h.offsetTop + h.offsetHeight) { |
|
254 top -= h.offsetHeight + 20 + settings(current).top; |
|
255 helper.parent.css({top: top + 'px'}).addClass("viewport-bottom"); |
|
256 } |
|
257 } |
|
258 |
|
259 function viewport() { |
|
260 return { |
|
261 x: $(window).scrollLeft(), |
|
262 y: $(window).scrollTop(), |
|
263 cx: $(window).width(), |
|
264 cy: $(window).height() |
|
265 }; |
|
266 } |
|
267 |
|
268 // hide helper and restore added classes and the title |
|
269 function hide(event) { |
|
270 if($.tooltip.blocked) |
|
271 return; |
|
272 // clear timeout if possible |
|
273 if(tID) |
|
274 clearTimeout(tID); |
|
275 // no more current element |
|
276 current = null; |
|
277 |
|
278 var tsettings = settings(this); |
|
279 function complete() { |
|
280 helper.parent.removeClass( tsettings.extraClass ).hide().css("opacity", ""); |
|
281 } |
|
282 if ((!IE || !$.fn.bgiframe) && tsettings.fade) { |
|
283 if (helper.parent.is(':animated')) |
|
284 helper.parent.stop().fadeTo(tsettings.fade, 0, complete); |
|
285 else |
|
286 helper.parent.stop().fadeOut(tsettings.fade, complete); |
|
287 } else |
|
288 complete(); |
|
289 |
|
290 if( settings(this).fixPNG ) |
|
291 helper.parent.unfixPNG(); |
|
292 } |
|
293 |
|
294 })(jQuery); |
|