tooltip.js 16 KB

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