Mercurial > wikked
comparison static/bootstrap/js/tooltip.js @ 149:d29e2f337b00
Updated to Bootstrap 3.0.
author | Ludovic Chabant <ludovic@chabant.com> |
---|---|
date | Thu, 12 Dec 2013 21:54:04 -0800 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
148:f02e049d6546 | 149:d29e2f337b00 |
---|---|
1 /* ======================================================================== | |
2 * Bootstrap: tooltip.js v3.0.3 | |
3 * http://getbootstrap.com/javascript/#tooltip | |
4 * Inspired by the original jQuery.tipsy by Jason Frame | |
5 * ======================================================================== | |
6 * Copyright 2013 Twitter, Inc. | |
7 * | |
8 * Licensed under the Apache License, Version 2.0 (the "License"); | |
9 * you may not use this file except in compliance with the License. | |
10 * You may obtain a copy of the License at | |
11 * | |
12 * http://www.apache.org/licenses/LICENSE-2.0 | |
13 * | |
14 * Unless required by applicable law or agreed to in writing, software | |
15 * distributed under the License is distributed on an "AS IS" BASIS, | |
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
17 * See the License for the specific language governing permissions and | |
18 * limitations under the License. | |
19 * ======================================================================== */ | |
20 | |
21 | |
22 +function ($) { "use strict"; | |
23 | |
24 // TOOLTIP PUBLIC CLASS DEFINITION | |
25 // =============================== | |
26 | |
27 var Tooltip = function (element, options) { | |
28 this.type = | |
29 this.options = | |
30 this.enabled = | |
31 this.timeout = | |
32 this.hoverState = | |
33 this.$element = null | |
34 | |
35 this.init('tooltip', element, options) | |
36 } | |
37 | |
38 Tooltip.DEFAULTS = { | |
39 animation: true | |
40 , placement: 'top' | |
41 , selector: false | |
42 , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' | |
43 , trigger: 'hover focus' | |
44 , title: '' | |
45 , delay: 0 | |
46 , html: false | |
47 , container: false | |
48 } | |
49 | |
50 Tooltip.prototype.init = function (type, element, options) { | |
51 this.enabled = true | |
52 this.type = type | |
53 this.$element = $(element) | |
54 this.options = this.getOptions(options) | |
55 | |
56 var triggers = this.options.trigger.split(' ') | |
57 | |
58 for (var i = triggers.length; i--;) { | |
59 var trigger = triggers[i] | |
60 | |
61 if (trigger == 'click') { | |
62 this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this)) | |
63 } else if (trigger != 'manual') { | |
64 var eventIn = trigger == 'hover' ? 'mouseenter' : 'focus' | |
65 var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur' | |
66 | |
67 this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) | |
68 this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) | |
69 } | |
70 } | |
71 | |
72 this.options.selector ? | |
73 (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) : | |
74 this.fixTitle() | |
75 } | |
76 | |
77 Tooltip.prototype.getDefaults = function () { | |
78 return Tooltip.DEFAULTS | |
79 } | |
80 | |
81 Tooltip.prototype.getOptions = function (options) { | |
82 options = $.extend({}, this.getDefaults(), this.$element.data(), options) | |
83 | |
84 if (options.delay && typeof options.delay == 'number') { | |
85 options.delay = { | |
86 show: options.delay | |
87 , hide: options.delay | |
88 } | |
89 } | |
90 | |
91 return options | |
92 } | |
93 | |
94 Tooltip.prototype.getDelegateOptions = function () { | |
95 var options = {} | |
96 var defaults = this.getDefaults() | |
97 | |
98 this._options && $.each(this._options, function (key, value) { | |
99 if (defaults[key] != value) options[key] = value | |
100 }) | |
101 | |
102 return options | |
103 } | |
104 | |
105 Tooltip.prototype.enter = function (obj) { | |
106 var self = obj instanceof this.constructor ? | |
107 obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) | |
108 | |
109 clearTimeout(self.timeout) | |
110 | |
111 self.hoverState = 'in' | |
112 | |
113 if (!self.options.delay || !self.options.delay.show) return self.show() | |
114 | |
115 self.timeout = setTimeout(function () { | |
116 if (self.hoverState == 'in') self.show() | |
117 }, self.options.delay.show) | |
118 } | |
119 | |
120 Tooltip.prototype.leave = function (obj) { | |
121 var self = obj instanceof this.constructor ? | |
122 obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) | |
123 | |
124 clearTimeout(self.timeout) | |
125 | |
126 self.hoverState = 'out' | |
127 | |
128 if (!self.options.delay || !self.options.delay.hide) return self.hide() | |
129 | |
130 self.timeout = setTimeout(function () { | |
131 if (self.hoverState == 'out') self.hide() | |
132 }, self.options.delay.hide) | |
133 } | |
134 | |
135 Tooltip.prototype.show = function () { | |
136 var e = $.Event('show.bs.'+ this.type) | |
137 | |
138 if (this.hasContent() && this.enabled) { | |
139 this.$element.trigger(e) | |
140 | |
141 if (e.isDefaultPrevented()) return | |
142 | |
143 var $tip = this.tip() | |
144 | |
145 this.setContent() | |
146 | |
147 if (this.options.animation) $tip.addClass('fade') | |
148 | |
149 var placement = typeof this.options.placement == 'function' ? | |
150 this.options.placement.call(this, $tip[0], this.$element[0]) : | |
151 this.options.placement | |
152 | |
153 var autoToken = /\s?auto?\s?/i | |
154 var autoPlace = autoToken.test(placement) | |
155 if (autoPlace) placement = placement.replace(autoToken, '') || 'top' | |
156 | |
157 $tip | |
158 .detach() | |
159 .css({ top: 0, left: 0, display: 'block' }) | |
160 .addClass(placement) | |
161 | |
162 this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element) | |
163 | |
164 var pos = this.getPosition() | |
165 var actualWidth = $tip[0].offsetWidth | |
166 var actualHeight = $tip[0].offsetHeight | |
167 | |
168 if (autoPlace) { | |
169 var $parent = this.$element.parent() | |
170 | |
171 var orgPlacement = placement | |
172 var docScroll = document.documentElement.scrollTop || document.body.scrollTop | |
173 var parentWidth = this.options.container == 'body' ? window.innerWidth : $parent.outerWidth() | |
174 var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight() | |
175 var parentLeft = this.options.container == 'body' ? 0 : $parent.offset().left | |
176 | |
177 placement = placement == 'bottom' && pos.top + pos.height + actualHeight - docScroll > parentHeight ? 'top' : | |
178 placement == 'top' && pos.top - docScroll - actualHeight < 0 ? 'bottom' : | |
179 placement == 'right' && pos.right + actualWidth > parentWidth ? 'left' : | |
180 placement == 'left' && pos.left - actualWidth < parentLeft ? 'right' : | |
181 placement | |
182 | |
183 $tip | |
184 .removeClass(orgPlacement) | |
185 .addClass(placement) | |
186 } | |
187 | |
188 var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight) | |
189 | |
190 this.applyPlacement(calculatedOffset, placement) | |
191 this.$element.trigger('shown.bs.' + this.type) | |
192 } | |
193 } | |
194 | |
195 Tooltip.prototype.applyPlacement = function(offset, placement) { | |
196 var replace | |
197 var $tip = this.tip() | |
198 var width = $tip[0].offsetWidth | |
199 var height = $tip[0].offsetHeight | |
200 | |
201 // manually read margins because getBoundingClientRect includes difference | |
202 var marginTop = parseInt($tip.css('margin-top'), 10) | |
203 var marginLeft = parseInt($tip.css('margin-left'), 10) | |
204 | |
205 // we must check for NaN for ie 8/9 | |
206 if (isNaN(marginTop)) marginTop = 0 | |
207 if (isNaN(marginLeft)) marginLeft = 0 | |
208 | |
209 offset.top = offset.top + marginTop | |
210 offset.left = offset.left + marginLeft | |
211 | |
212 $tip | |
213 .offset(offset) | |
214 .addClass('in') | |
215 | |
216 // check to see if placing tip in new offset caused the tip to resize itself | |
217 var actualWidth = $tip[0].offsetWidth | |
218 var actualHeight = $tip[0].offsetHeight | |
219 | |
220 if (placement == 'top' && actualHeight != height) { | |
221 replace = true | |
222 offset.top = offset.top + height - actualHeight | |
223 } | |
224 | |
225 if (/bottom|top/.test(placement)) { | |
226 var delta = 0 | |
227 | |
228 if (offset.left < 0) { | |
229 delta = offset.left * -2 | |
230 offset.left = 0 | |
231 | |
232 $tip.offset(offset) | |
233 | |
234 actualWidth = $tip[0].offsetWidth | |
235 actualHeight = $tip[0].offsetHeight | |
236 } | |
237 | |
238 this.replaceArrow(delta - width + actualWidth, actualWidth, 'left') | |
239 } else { | |
240 this.replaceArrow(actualHeight - height, actualHeight, 'top') | |
241 } | |
242 | |
243 if (replace) $tip.offset(offset) | |
244 } | |
245 | |
246 Tooltip.prototype.replaceArrow = function(delta, dimension, position) { | |
247 this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + "%") : '') | |
248 } | |
249 | |
250 Tooltip.prototype.setContent = function () { | |
251 var $tip = this.tip() | |
252 var title = this.getTitle() | |
253 | |
254 $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title) | |
255 $tip.removeClass('fade in top bottom left right') | |
256 } | |
257 | |
258 Tooltip.prototype.hide = function () { | |
259 var that = this | |
260 var $tip = this.tip() | |
261 var e = $.Event('hide.bs.' + this.type) | |
262 | |
263 function complete() { | |
264 if (that.hoverState != 'in') $tip.detach() | |
265 } | |
266 | |
267 this.$element.trigger(e) | |
268 | |
269 if (e.isDefaultPrevented()) return | |
270 | |
271 $tip.removeClass('in') | |
272 | |
273 $.support.transition && this.$tip.hasClass('fade') ? | |
274 $tip | |
275 .one($.support.transition.end, complete) | |
276 .emulateTransitionEnd(150) : | |
277 complete() | |
278 | |
279 this.$element.trigger('hidden.bs.' + this.type) | |
280 | |
281 return this | |
282 } | |
283 | |
284 Tooltip.prototype.fixTitle = function () { | |
285 var $e = this.$element | |
286 if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { | |
287 $e.attr('data-original-title', $e.attr('title') || '').attr('title', '') | |
288 } | |
289 } | |
290 | |
291 Tooltip.prototype.hasContent = function () { | |
292 return this.getTitle() | |
293 } | |
294 | |
295 Tooltip.prototype.getPosition = function () { | |
296 var el = this.$element[0] | |
297 return $.extend({}, (typeof el.getBoundingClientRect == 'function') ? el.getBoundingClientRect() : { | |
298 width: el.offsetWidth | |
299 , height: el.offsetHeight | |
300 }, this.$element.offset()) | |
301 } | |
302 | |
303 Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) { | |
304 return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } : | |
305 placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } : | |
306 placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } : | |
307 /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width } | |
308 } | |
309 | |
310 Tooltip.prototype.getTitle = function () { | |
311 var title | |
312 var $e = this.$element | |
313 var o = this.options | |
314 | |
315 title = $e.attr('data-original-title') | |
316 || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) | |
317 | |
318 return title | |
319 } | |
320 | |
321 Tooltip.prototype.tip = function () { | |
322 return this.$tip = this.$tip || $(this.options.template) | |
323 } | |
324 | |
325 Tooltip.prototype.arrow = function () { | |
326 return this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow') | |
327 } | |
328 | |
329 Tooltip.prototype.validate = function () { | |
330 if (!this.$element[0].parentNode) { | |
331 this.hide() | |
332 this.$element = null | |
333 this.options = null | |
334 } | |
335 } | |
336 | |
337 Tooltip.prototype.enable = function () { | |
338 this.enabled = true | |
339 } | |
340 | |
341 Tooltip.prototype.disable = function () { | |
342 this.enabled = false | |
343 } | |
344 | |
345 Tooltip.prototype.toggleEnabled = function () { | |
346 this.enabled = !this.enabled | |
347 } | |
348 | |
349 Tooltip.prototype.toggle = function (e) { | |
350 var self = e ? $(e.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) : this | |
351 self.tip().hasClass('in') ? self.leave(self) : self.enter(self) | |
352 } | |
353 | |
354 Tooltip.prototype.destroy = function () { | |
355 this.hide().$element.off('.' + this.type).removeData('bs.' + this.type) | |
356 } | |
357 | |
358 | |
359 // TOOLTIP PLUGIN DEFINITION | |
360 // ========================= | |
361 | |
362 var old = $.fn.tooltip | |
363 | |
364 $.fn.tooltip = function (option) { | |
365 return this.each(function () { | |
366 var $this = $(this) | |
367 var data = $this.data('bs.tooltip') | |
368 var options = typeof option == 'object' && option | |
369 | |
370 if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options))) | |
371 if (typeof option == 'string') data[option]() | |
372 }) | |
373 } | |
374 | |
375 $.fn.tooltip.Constructor = Tooltip | |
376 | |
377 | |
378 // TOOLTIP NO CONFLICT | |
379 // =================== | |
380 | |
381 $.fn.tooltip.noConflict = function () { | |
382 $.fn.tooltip = old | |
383 return this | |
384 } | |
385 | |
386 }(jQuery); |