]>
Commit | Line | Data |
---|---|---|
06a3d686 BB |
1 | /* ======================================================================== |
2 | * Bootstrap: tooltip.js v3.0.0 | |
3 | * http://twbs.github.com/bootstrap/javascript.html#tooltip | |
4 | * Inspired by the original jQuery.tipsy by Jason Frame | |
5 | * ======================================================================== | |
6 | * Copyright 2012 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 | }(window.jQuery); |