tooltip.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. /* ========================================================================
  2. * Bootstrap: tooltip.js v3.3.2
  3. * http://getbootstrap.com/javascript/#tooltip
  4. * Inspired by the original jQuery.tipsy by Jason Frame
  5. * ========================================================================
  6. * Copyright 2011-2015 Twitter, Inc.
  7. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  8. * ======================================================================== */
  9. +function ($) {
  10. 'use strict';
  11. // TOOLTIP PUBLIC CLASS DEFINITION
  12. // ===============================
  13. var Tooltip = function (element, options) {
  14. this.type =
  15. this.options =
  16. this.enabled =
  17. this.timeout =
  18. this.hoverState =
  19. this.$element = null
  20. this.init('tooltip', element, options)
  21. }
  22. Tooltip.VERSION = '3.3.2'
  23. Tooltip.TRANSITION_DURATION = 150
  24. Tooltip.DEFAULTS = {
  25. animation: true,
  26. placement: 'top',
  27. selector: false,
  28. template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
  29. trigger: 'hover focus',
  30. title: '',
  31. delay: 0,
  32. html: false,
  33. container: false,
  34. viewport: {
  35. selector: 'body',
  36. padding: 0
  37. }
  38. }
  39. Tooltip.prototype.init = function (type, element, options) {
  40. this.enabled = true
  41. this.type = type
  42. this.$element = $(element)
  43. this.options = this.getOptions(options)
  44. this.$viewport = this.options.viewport && $(this.options.viewport.selector || this.options.viewport)
  45. var triggers = this.options.trigger.split(' ')
  46. for (var i = triggers.length; i--;) {
  47. var trigger = triggers[i]
  48. if (trigger == 'click') {
  49. this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
  50. } else if (trigger != 'manual') {
  51. var eventIn = trigger == 'hover' ? 'mouseenter' : 'focusin'
  52. var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'
  53. this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
  54. this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
  55. }
  56. }
  57. this.options.selector ?
  58. (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
  59. this.fixTitle()
  60. }
  61. Tooltip.prototype.getDefaults = function () {
  62. return Tooltip.DEFAULTS
  63. }
  64. Tooltip.prototype.getOptions = function (options) {
  65. options = $.extend({}, this.getDefaults(), this.$element.data(), options)
  66. if (options.delay && typeof options.delay == 'number') {
  67. options.delay = {
  68. show: options.delay,
  69. hide: options.delay
  70. }
  71. }
  72. return options
  73. }
  74. Tooltip.prototype.getDelegateOptions = function () {
  75. var options = {}
  76. var defaults = this.getDefaults()
  77. this._options && $.each(this._options, function (key, value) {
  78. if (defaults[key] != value) options[key] = value
  79. })
  80. return options
  81. }
  82. Tooltip.prototype.enter = function (obj) {
  83. var self = obj instanceof this.constructor ?
  84. obj : $(obj.currentTarget).data('bs.' + this.type)
  85. if (self && self.$tip && self.$tip.is(':visible')) {
  86. self.hoverState = 'in'
  87. return
  88. }
  89. if (!self) {
  90. self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
  91. $(obj.currentTarget).data('bs.' + this.type, self)
  92. }
  93. clearTimeout(self.timeout)
  94. self.hoverState = 'in'
  95. if (!self.options.delay || !self.options.delay.show) return self.show()
  96. self.timeout = setTimeout(function () {
  97. if (self.hoverState == 'in') self.show()
  98. }, self.options.delay.show)
  99. }
  100. Tooltip.prototype.leave = function (obj) {
  101. var self = obj instanceof this.constructor ?
  102. obj : $(obj.currentTarget).data('bs.' + this.type)
  103. if (!self) {
  104. self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
  105. $(obj.currentTarget).data('bs.' + this.type, self)
  106. }
  107. clearTimeout(self.timeout)
  108. self.hoverState = 'out'
  109. if (!self.options.delay || !self.options.delay.hide) return self.hide()
  110. self.timeout = setTimeout(function () {
  111. if (self.hoverState == 'out') self.hide()
  112. }, self.options.delay.hide)
  113. }
  114. Tooltip.prototype.show = function () {
  115. var e = $.Event('show.bs.' + this.type)
  116. if (this.hasContent() && this.enabled) {
  117. this.$element.trigger(e)
  118. var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
  119. if (e.isDefaultPrevented() || !inDom) return
  120. var that = this
  121. var $tip = this.tip()
  122. var tipId = this.getUID(this.type)
  123. this.setContent()
  124. $tip.attr('id', tipId)
  125. this.$element.attr('aria-describedby', tipId)
  126. if (this.options.animation) $tip.addClass('fade')
  127. var placement = typeof this.options.placement == 'function' ?
  128. this.options.placement.call(this, $tip[0], this.$element[0]) :
  129. this.options.placement
  130. var autoToken = /\s?auto?\s?/i
  131. var autoPlace = autoToken.test(placement)
  132. if (autoPlace) placement = placement.replace(autoToken, '') || 'top'
  133. $tip
  134. .detach()
  135. .css({ top: 0, left: 0, display: 'block' })
  136. .addClass(placement)
  137. .data('bs.' + this.type, this)
  138. this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
  139. var pos = this.getPosition()
  140. var actualWidth = $tip[0].offsetWidth
  141. var actualHeight = $tip[0].offsetHeight
  142. if (autoPlace) {
  143. var orgPlacement = placement
  144. var $container = this.options.container ? $(this.options.container) : this.$element.parent()
  145. var containerDim = this.getPosition($container)
  146. placement = placement == 'bottom' && pos.bottom + actualHeight > containerDim.bottom ? 'top' :
  147. placement == 'top' && pos.top - actualHeight < containerDim.top ? 'bottom' :
  148. placement == 'right' && pos.right + actualWidth > containerDim.width ? 'left' :
  149. placement == 'left' && pos.left - actualWidth < containerDim.left ? 'right' :
  150. placement
  151. $tip
  152. .removeClass(orgPlacement)
  153. .addClass(placement)
  154. }
  155. var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
  156. this.applyPlacement(calculatedOffset, placement)
  157. var complete = function () {
  158. var prevHoverState = that.hoverState
  159. that.$element.trigger('shown.bs.' + that.type)
  160. that.hoverState = null
  161. if (prevHoverState == 'out') that.leave(that)
  162. }
  163. $.support.transition && this.$tip.hasClass('fade') ?
  164. $tip
  165. .one('bsTransitionEnd', complete)
  166. .emulateTransitionEnd(Tooltip.TRANSITION_DURATION) :
  167. complete()
  168. }
  169. }
  170. Tooltip.prototype.applyPlacement = function (offset, placement) {
  171. var $tip = this.tip()
  172. var width = $tip[0].offsetWidth
  173. var height = $tip[0].offsetHeight
  174. // manually read margins because getBoundingClientRect includes difference
  175. var marginTop = parseInt($tip.css('margin-top'), 10)
  176. var marginLeft = parseInt($tip.css('margin-left'), 10)
  177. // we must check for NaN for ie 8/9
  178. if (isNaN(marginTop)) marginTop = 0
  179. if (isNaN(marginLeft)) marginLeft = 0
  180. offset.top = offset.top + marginTop
  181. offset.left = offset.left + marginLeft
  182. // $.fn.offset doesn't round pixel values
  183. // so we use setOffset directly with our own function B-0
  184. $.offset.setOffset($tip[0], $.extend({
  185. using: function (props) {
  186. $tip.css({
  187. top: Math.round(props.top),
  188. left: Math.round(props.left)
  189. })
  190. }
  191. }, offset), 0)
  192. $tip.addClass('in')
  193. // check to see if placing tip in new offset caused the tip to resize itself
  194. var actualWidth = $tip[0].offsetWidth
  195. var actualHeight = $tip[0].offsetHeight
  196. if (placement == 'top' && actualHeight != height) {
  197. offset.top = offset.top + height - actualHeight
  198. }
  199. var delta = this.getViewportAdjustedDelta(placement, offset, actualWidth, actualHeight)
  200. if (delta.left) offset.left += delta.left
  201. else offset.top += delta.top
  202. var isVertical = /top|bottom/.test(placement)
  203. var arrowDelta = isVertical ? delta.left * 2 - width + actualWidth : delta.top * 2 - height + actualHeight
  204. var arrowOffsetPosition = isVertical ? 'offsetWidth' : 'offsetHeight'
  205. $tip.offset(offset)
  206. this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], isVertical)
  207. }
  208. Tooltip.prototype.replaceArrow = function (delta, dimension, isHorizontal) {
  209. this.arrow()
  210. .css(isHorizontal ? 'left' : 'top', 50 * (1 - delta / dimension) + '%')
  211. .css(isHorizontal ? 'top' : 'left', '')
  212. }
  213. Tooltip.prototype.setContent = function () {
  214. var $tip = this.tip()
  215. var title = this.getTitle()
  216. $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
  217. $tip.removeClass('fade in top bottom left right')
  218. }
  219. Tooltip.prototype.hide = function (callback) {
  220. var that = this
  221. var $tip = this.tip()
  222. var e = $.Event('hide.bs.' + this.type)
  223. function complete() {
  224. if (that.hoverState != 'in') $tip.detach()
  225. that.$element
  226. .removeAttr('aria-describedby')
  227. .trigger('hidden.bs.' + that.type)
  228. callback && callback()
  229. }
  230. this.$element.trigger(e)
  231. if (e.isDefaultPrevented()) return
  232. $tip.removeClass('in')
  233. $.support.transition && this.$tip.hasClass('fade') ?
  234. $tip
  235. .one('bsTransitionEnd', complete)
  236. .emulateTransitionEnd(Tooltip.TRANSITION_DURATION) :
  237. complete()
  238. this.hoverState = null
  239. return this
  240. }
  241. Tooltip.prototype.fixTitle = function () {
  242. var $e = this.$element
  243. if ($e.attr('title') || typeof ($e.attr('data-original-title')) != 'string') {
  244. $e.attr('data-original-title', $e.attr('title') || '').attr('title', '')
  245. }
  246. }
  247. Tooltip.prototype.hasContent = function () {
  248. return this.getTitle()
  249. }
  250. Tooltip.prototype.getPosition = function ($element) {
  251. $element = $element || this.$element
  252. var el = $element[0]
  253. var isBody = el.tagName == 'BODY'
  254. var elRect = el.getBoundingClientRect()
  255. if (elRect.width == null) {
  256. // width and height are missing in IE8, so compute them manually; see https://github.com/twbs/bootstrap/issues/14093
  257. elRect = $.extend({}, elRect, { width: elRect.right - elRect.left, height: elRect.bottom - elRect.top })
  258. }
  259. var elOffset = isBody ? { top: 0, left: 0 } : $element.offset()
  260. var scroll = { scroll: isBody ? document.documentElement.scrollTop || document.body.scrollTop : $element.scrollTop() }
  261. var outerDims = isBody ? { width: $(window).width(), height: $(window).height() } : null
  262. return $.extend({}, elRect, scroll, outerDims, elOffset)
  263. }
  264. Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
  265. return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
  266. placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
  267. placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
  268. /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
  269. }
  270. Tooltip.prototype.getViewportAdjustedDelta = function (placement, pos, actualWidth, actualHeight) {
  271. var delta = { top: 0, left: 0 }
  272. if (!this.$viewport) return delta
  273. var viewportPadding = this.options.viewport && this.options.viewport.padding || 0
  274. var viewportDimensions = this.getPosition(this.$viewport)
  275. if (/right|left/.test(placement)) {
  276. var topEdgeOffset = pos.top - viewportPadding - viewportDimensions.scroll
  277. var bottomEdgeOffset = pos.top + viewportPadding - viewportDimensions.scroll + actualHeight
  278. if (topEdgeOffset < viewportDimensions.top) { // top overflow
  279. delta.top = viewportDimensions.top - topEdgeOffset
  280. } else if (bottomEdgeOffset > viewportDimensions.top + viewportDimensions.height) { // bottom overflow
  281. delta.top = viewportDimensions.top + viewportDimensions.height - bottomEdgeOffset
  282. }
  283. } else {
  284. var leftEdgeOffset = pos.left - viewportPadding
  285. var rightEdgeOffset = pos.left + viewportPadding + actualWidth
  286. if (leftEdgeOffset < viewportDimensions.left) { // left overflow
  287. delta.left = viewportDimensions.left - leftEdgeOffset
  288. } else if (rightEdgeOffset > viewportDimensions.width) { // right overflow
  289. delta.left = viewportDimensions.left + viewportDimensions.width - rightEdgeOffset
  290. }
  291. }
  292. return delta
  293. }
  294. Tooltip.prototype.getTitle = function () {
  295. var title
  296. var $e = this.$element
  297. var o = this.options
  298. title = $e.attr('data-original-title')
  299. || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
  300. return title
  301. }
  302. Tooltip.prototype.getUID = function (prefix) {
  303. do prefix += ~~(Math.random() * 1000000)
  304. while (document.getElementById(prefix))
  305. return prefix
  306. }
  307. Tooltip.prototype.tip = function () {
  308. return (this.$tip = this.$tip || $(this.options.template))
  309. }
  310. Tooltip.prototype.arrow = function () {
  311. return (this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow'))
  312. }
  313. Tooltip.prototype.enable = function () {
  314. this.enabled = true
  315. }
  316. Tooltip.prototype.disable = function () {
  317. this.enabled = false
  318. }
  319. Tooltip.prototype.toggleEnabled = function () {
  320. this.enabled = !this.enabled
  321. }
  322. Tooltip.prototype.toggle = function (e) {
  323. var self = this
  324. if (e) {
  325. self = $(e.currentTarget).data('bs.' + this.type)
  326. if (!self) {
  327. self = new this.constructor(e.currentTarget, this.getDelegateOptions())
  328. $(e.currentTarget).data('bs.' + this.type, self)
  329. }
  330. }
  331. self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
  332. }
  333. Tooltip.prototype.destroy = function () {
  334. var that = this
  335. clearTimeout(this.timeout)
  336. this.hide(function () {
  337. that.$element.off('.' + that.type).removeData('bs.' + that.type)
  338. })
  339. }
  340. // TOOLTIP PLUGIN DEFINITION
  341. // =========================
  342. function Plugin(option) {
  343. return this.each(function () {
  344. var $this = $(this)
  345. var data = $this.data('bs.tooltip')
  346. var options = typeof option == 'object' && option
  347. if (!data && option == 'destroy') return
  348. if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
  349. if (typeof option == 'string') data[option]()
  350. })
  351. }
  352. var old = $.fn.tooltip
  353. $.fn.tooltip = Plugin
  354. $.fn.tooltip.Constructor = Tooltip
  355. // TOOLTIP NO CONFLICT
  356. // ===================
  357. $.fn.tooltip.noConflict = function () {
  358. $.fn.tooltip = old
  359. return this
  360. }
  361. }(jQuery);