diff options
| author | fat <[email protected]> | 2013-05-16 17:18:15 -0700 |
|---|---|---|
| committer | fat <[email protected]> | 2013-05-16 17:18:15 -0700 |
| commit | 149ecd21bf7c56df897088d09ca309eb43a7dd9d (patch) | |
| tree | 9138ea6d99244c3abf114069482c8c397a0bc2cd /js/tooltip.js | |
| parent | 53bc93282fbeab3c1b779f1914ab040290668369 (diff) | |
| download | bootstrap-149ecd21bf7c56df897088d09ca309eb43a7dd9d.tar.xz bootstrap-149ecd21bf7c56df897088d09ca309eb43a7dd9d.zip | |
straight trash wang
Diffstat (limited to 'js/tooltip.js')
| -rw-r--r-- | js/tooltip.js | 484 |
1 files changed, 237 insertions, 247 deletions
diff --git a/js/tooltip.js b/js/tooltip.js index f199a3e6a..a75b755fd 100644 --- a/js/tooltip.js +++ b/js/tooltip.js @@ -19,317 +19,319 @@ * ========================================================== */ -!function ($) { +!function ($) { "use strict"; - "use strict"; // jshint ;_; - - - /* TOOLTIP PUBLIC CLASS DEFINITION - * =============================== */ + // TOOLTIP PUBLIC CLASS DEFINITION + // =============================== var Tooltip = function (element, options) { + this.type = + this.options = + this.enabled = + this.timeout = + this.hoverState = + this.$element = null + this.init('tooltip', element, options) } - Tooltip.prototype = { - - constructor: Tooltip - - , init: function (type, element, options) { - var eventIn - , eventOut - , triggers - , trigger - , i - - this.type = type - this.$element = $(element) - this.options = this.getOptions(options) - this.enabled = true - - triggers = this.options.trigger.split(' ') - - for (i = triggers.length; i--;) { - trigger = triggers[i] - if (trigger == 'click') { - this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this)) - } else if (trigger != 'manual') { - eventIn = trigger == 'hover' ? 'mouseenter' : 'focus' - eventOut = trigger == 'hover' ? 'mouseleave' : 'blur' - this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) - this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) - } - } + Tooltip.DEFAULTS = { + animation: true + , placement: 'top' + , selector: false + , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' + , trigger: 'hover focus' + , title: '' + , delay: 0 + , html: false + , container: false + } - this.options.selector ? - (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) : - this.fixTitle() - } + Tooltip.prototype.init = function (type, element, options) { + this.type = type + this.options = this.getOptions(options) + this.enabled = true + this.$element = $(element) - , getOptions: function (options) { - options = $.extend({}, $.fn[this.type].defaults, this.$element.data(), options) + var triggers = this.options.trigger.split(' ') - if (options.delay && typeof options.delay == 'number') { - options.delay = { - show: options.delay - , hide: options.delay - } + for (var i = triggers.length; i--;) { + var trigger = triggers[i] + + if (trigger == 'click') { + this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this)) + } else if (trigger != 'manual') { + var eventIn = trigger == 'hover' ? 'mouseenter' : 'focus' + var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur' + + this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) + this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) } + } + + this.options.selector ? + (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) : + this.fixTitle() + } + + Tooltip.prototype.getDefaults = function () { + return Tooltip.DEFAULTS + } + + Tooltip.prototype.getOptions = function (options) { + options = $.extend({}, this.getDefaults(), this.$element.data(), options) - return options + if (options.delay && typeof options.delay == 'number') { + options.delay = { + show: options.delay + , hide: options.delay + } } - , enter: function (e) { - var defaults = $.fn[this.type].defaults - , options = {} - , self + return options + } - this._options && $.each(this._options, function (key, value) { - if (defaults[key] != value) options[key] = value - }, this) + Tooltip.prototype.enter = function (e) { + var defaults = $.fn[this.type].defaults + var options = {} - self = $(e.currentTarget)[this.type](options).data(this.type) + this._options && $.each(this._options, function (key, value) { + if (defaults[key] != value) options[key] = value + }, this) - if (!self.options.delay || !self.options.delay.show) return self.show() + var self = $(e.currentTarget)[this.type](options).data(this.type) - clearTimeout(this.timeout) - self.hoverState = 'in' - this.timeout = setTimeout(function() { - if (self.hoverState == 'in') self.show() - }, self.options.delay.show) - } + if (!self.options.delay || !self.options.delay.show) return self.show() - , leave: function (e) { - var self = $(e.currentTarget)[this.type](this._options).data(this.type) + clearTimeout(this.timeout) - if (this.timeout) clearTimeout(this.timeout) - if (!self.options.delay || !self.options.delay.hide) return self.hide() + self.hoverState = 'in' + this.timeout = setTimeout(function() { + if (self.hoverState == 'in') self.show() + }, self.options.delay.show) + } - self.hoverState = 'out' - this.timeout = setTimeout(function() { - if (self.hoverState == 'out') self.hide() - }, self.options.delay.hide) - } + Tooltip.prototype.leave = function (e) { + var self = $(e.currentTarget)[this.type](this._options).data(this.type) + + if (this.timeout) clearTimeout(this.timeout) + if (!self.options.delay || !self.options.delay.hide) return self.hide() - , show: function () { - var $tip - , pos - , actualWidth - , actualHeight - , placement - , tp - , e = $.Event('show') + self.hoverState = 'out' + this.timeout = setTimeout(function() { + if (self.hoverState == 'out') self.hide() + }, self.options.delay.hide) + } - if (this.hasContent() && this.enabled) { - this.$element.trigger(e) - if (e.isDefaultPrevented()) return - $tip = this.tip() - this.setContent() + Tooltip.prototype.show = function () { + var e = $.Event('bs:'+ this.type + ':show') - if (this.options.animation) { - $tip.addClass('fade') - } + if (this.hasContent() && this.enabled) { + this.$element.trigger(e) - placement = typeof this.options.placement == 'function' ? - this.options.placement.call(this, $tip[0], this.$element[0]) : - this.options.placement + if (e.isDefaultPrevented()) return - $tip - .detach() - .css({ top: 0, left: 0, display: 'block' }) + var $tip = this.tip() - this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element) + this.setContent() - pos = this.getPosition() + if (this.options.animation) $tip.addClass('fade') - actualWidth = $tip[0].offsetWidth - actualHeight = $tip[0].offsetHeight + var placement = typeof this.options.placement == 'function' ? + this.options.placement.call(this, $tip[0], this.$element[0]) : + this.options.placement - switch (placement) { - case 'bottom': - tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} - break - case 'top': - tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2} - break - case 'left': - tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth} - break - case 'right': - tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width} - break - } - - this.applyPlacement(tp, placement) - this.$element.trigger('shown') + $tip + .detach() + .css({ top: 0, left: 0, display: 'block' }) + + this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element) + + var tp + var pos = this.getPosition() + var actualWidth = $tip[0].offsetWidth + var actualHeight = $tip[0].offsetHeight + + switch (placement) { + case 'bottom': + tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'top': + tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'left': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth} + break + case 'right': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width} + break } + + this.applyPlacement(tp, placement) + this.$element.trigger('shown') } - , applyPlacement: function(offset, placement){ - var $tip = this.tip() - , width = $tip[0].offsetWidth - , height = $tip[0].offsetHeight - , actualWidth - , actualHeight - , delta - , replace + Tooltip.prototype.applyPlacement = function(offset, placement) { + var $tip = this.tip() + var width = $tip[0].offsetWidth + var height = $tip[0].offsetHeight - $tip - .offset(offset) - .addClass(placement) - .addClass('in') + $tip + .offset(offset) + .addClass(placement) + .addClass('in') - actualWidth = $tip[0].offsetWidth - actualHeight = $tip[0].offsetHeight + var actualWidth = $tip[0].offsetWidth + var actualHeight = $tip[0].offsetHeight - if (placement == 'top' && actualHeight != height) { - offset.top = offset.top + height - actualHeight - replace = true - } + if (placement == 'top' && actualHeight != height) { + var replace = true + offset.top = offset.top + height - actualHeight + } + + if (placement == 'bottom' || placement == 'top') { + var delta = 0 - if (placement == 'bottom' || placement == 'top') { - delta = 0 + if (offset.left < 0){ + delta = offset.left * -2 + offset.left = 0 - if (offset.left < 0){ - delta = offset.left * -2 - offset.left = 0 - $tip.offset(offset) - actualWidth = $tip[0].offsetWidth - actualHeight = $tip[0].offsetHeight - } + $tip.offset(offset) - this.replaceArrow(delta - width + actualWidth, actualWidth, 'left') - } else { - this.replaceArrow(actualHeight - height, actualHeight, 'top') + actualWidth = $tip[0].offsetWidth + actualHeight = $tip[0].offsetHeight } - if (replace) $tip.offset(offset) + this.replaceArrow(delta - width + actualWidth, actualWidth, 'left') + } else { + this.replaceArrow(actualHeight - height, actualHeight, 'top') } - , replaceArrow: function(delta, dimension, position){ - this - .arrow() - .css(position, delta ? (50 * (1 - delta / dimension) + "%") : '') - } + if (replace) $tip.offset(offset) + } - , setContent: function () { - var $tip = this.tip() - , title = this.getTitle() + Tooltip.prototype.replaceArrow = function(delta, dimension, position){ + this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + "%") : '') + } - $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title) - $tip.removeClass('fade in top bottom left right') - } + Tooltip.prototype.setContent = function () { + var $tip = this.tip() + var title = this.getTitle() - , hide: function () { - var that = this - , $tip = this.tip() - , e = $.Event('hide') + $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title) + $tip.removeClass('fade in top bottom left right') + } - this.$element.trigger(e) - if (e.isDefaultPrevented()) return + Tooltip.prototype.hide = function () { + var that = this + var $tip = this.tip() + var e = $.Event('hide') - $tip.removeClass('in') + this.$element.trigger(e) - function removeWithAnimation() { - var timeout = setTimeout(function () { - $tip.off($.support.transition.end).detach() - }, 500) + if (e.isDefaultPrevented()) return - $tip.one($.support.transition.end, function () { - clearTimeout(timeout) - $tip.detach() - }) - } + $tip.removeClass('in') + + function removeWithAnimation() { + var timeout = setTimeout(function () { + $tip.off($.support.transition.end).detach() + }, 500) - $.support.transition && this.$tip.hasClass('fade') ? - removeWithAnimation() : + $tip.one($.support.transition.end, function () { + clearTimeout(timeout) $tip.detach() + }) + } - this.$element.trigger('hidden') + $.support.transition && this.$tip.hasClass('fade') ? + removeWithAnimation() : + $tip.detach() - return this - } + this.$element.trigger('hidden') - , fixTitle: function () { - var $e = this.$element - if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { - $e.attr('data-original-title', $e.attr('title') || '').attr('title', '') - } - } + return this + } - , hasContent: function () { - return this.getTitle() + Tooltip.prototype.fixTitle = function () { + var $e = this.$element + if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { + $e.attr('data-original-title', $e.attr('title') || '').attr('title', '') } + } - , getPosition: function () { - var el = this.$element[0] - return $.extend({}, (typeof el.getBoundingClientRect == 'function') ? el.getBoundingClientRect() : { - width: el.offsetWidth - , height: el.offsetHeight - }, this.$element.offset()) - } + Tooltip.prototype.hasContent = function () { + return this.getTitle() + } - , getTitle: function () { - var title - , $e = this.$element - , o = this.options + Tooltip.prototype.getPosition = function () { + var el = this.$element[0] + return $.extend({}, (typeof el.getBoundingClientRect == 'function') ? el.getBoundingClientRect() : { + width: el.offsetWidth + , height: el.offsetHeight + }, this.$element.offset()) + } - title = $e.attr('data-original-title') - || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) + Tooltip.prototype.getTitle = function () { + var title + var $e = this.$element + var o = this.options - return title - } + title = $e.attr('data-original-title') + || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) - , tip: function () { - return this.$tip = this.$tip || $(this.options.template) - } + return title + } - , arrow: function(){ - return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow") - } + Tooltip.prototype.tip = function () { + return this.$tip = this.$tip || $(this.options.template) + } - , validate: function () { - if (!this.$element[0].parentNode) { - this.hide() - this.$element = null - this.options = null - } - } + Tooltip.prototype.arrow =function(){ + return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow") + } - , enable: function () { - this.enabled = true + Tooltip.prototype.validate = function () { + if (!this.$element[0].parentNode) { + this.hide() + this.$element = null + this.options = null } + } - , disable: function () { - this.enabled = false - } + Tooltip.prototype.enable = function () { + this.enabled = true + } - , toggleEnabled: function () { - this.enabled = !this.enabled - } + Tooltip.prototype.disable = function () { + this.enabled = false + } - , toggle: function (e) { - var self = e ? $(e.currentTarget)[this.type](this._options).data(this.type) : this - self.tip().hasClass('in') ? self.hide() : self.show() - } + Tooltip.prototype.toggleEnabled = function () { + this.enabled = !this.enabled + } - , destroy: function () { - this.hide().$element.off('.' + this.type).removeData(this.type) - } + Tooltip.prototype.toggle = function (e) { + var self = e ? $(e.currentTarget)[this.type](this._options).data(this.type) : this + self.tip().hasClass('in') ? self.hide() : self.show() + } + Tooltip.prototype.destroy = function () { + this.hide().$element.off('.' + this.type).removeData(this.type) } - /* TOOLTIP PLUGIN DEFINITION - * ========================= */ + // TOOLTIP PLUGIN DEFINITION + // ========================= var old = $.fn.tooltip $.fn.tooltip = function ( option ) { return this.each(function () { - var $this = $(this) - , data = $this.data('tooltip') - , options = typeof option == 'object' && option + var $this = $(this) + var data = $this.data('tooltip') + var options = typeof option == 'object' && option + if (!data) $this.data('tooltip', (data = new Tooltip(this, options))) if (typeof option == 'string') data[option]() }) @@ -337,21 +339,9 @@ $.fn.tooltip.Constructor = Tooltip - $.fn.tooltip.defaults = { - animation: true - , placement: 'top' - , selector: false - , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' - , trigger: 'hover focus' - , title: '' - , delay: 0 - , html: false - , container: false - } - - /* TOOLTIP NO CONFLICT - * =================== */ + // TOOLTIP NO CONFLICT + // =================== $.fn.tooltip.noConflict = function () { $.fn.tooltip = old |
