|
0
|
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);
|
