https://www.saaten-zeller.de/templates/protostar/js/bootstrap-tooltip.js

1/* ===========================================================
2 * bootstrap-tooltip.js v2.0.0
3 * http://twitter.github.com/bootstrap/javascript.html#tooltips
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!function( $ ) {
22
23  "use strict"
24
25 /* TOOLTIP PUBLIC CLASS DEFINITION
26  * =============================== */
27
28  var Tooltip = function ( element, options ) {
29    this.init('tooltip', element, options)
30  }
31
32  Tooltip.prototype = {
33
34    constructor: Tooltip
35
36  , init: function ( type, element, options ) {
37      var eventIn
38        , eventOut
39
40      this.type = type
41      this.$element = $(element)
42      this.options = this.getOptions(options)
43      this.enabled = true
44
45      if (this.options.trigger != 'manual') {
46        eventIn  = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
47        eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
48        this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this))
49        this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this))
50      }
51
52      this.options.selector ?
53        (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
54        this.fixTitle()
55    }
56
57  , getOptions: function ( options ) {
58      options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
59
60      if (options.delay && typeof options.delay == 'number') {
61        options.delay = {
62          show: options.delay
63        , hide: options.delay
64        }
65      }
66
67      return options
68    }
69
70  , enter: function ( e ) {
71      var self = $(e.currentTarget)[this.type](this._options).data(this.type)
72
73      if (!self.options.delay || !self.options.delay.show) {
74        self.show()
75      } else {
76        self.hoverState = 'in'
77        setTimeout(function() {
78          if (self.hoverState == 'in') {
79            self.show()
80          }
81        }, self.options.delay.show)
82      }
83    }
84
85  , leave: function ( e ) {
86      var self = $(e.currentTarget)[this.type](this._options).data(this.type)
87
88      if (!self.options.delay || !self.options.delay.hide) {
89        self.hide()
90      } else {
91        self.hoverState = 'out'
92        setTimeout(function() {
93          if (self.hoverState == 'out') {
94            self.hide()
95          }
96        }, self.options.delay.hide)
97      }
98    }
99
100  , show: function () {
101      var $tip
102        , inside
103        , pos
104        , actualWidth
105        , actualHeight
106        , placement
107        , tp
108
109      if (this.hasContent() && this.enabled) {
110        $tip = this.tip()
111        this.setContent()
112
113        if (this.options.animation) {
114          $tip.addClass('fade')
115        }
116
117        placement = typeof this.options.placement == 'function' ?
118          this.options.placement.call(this, $tip[0], this.$element[0]) :
119          this.options.placement
120
121        inside = /in/.test(placement)
122
123        $tip
124          .remove()
125          .css({ top: 0, left: 0, display: 'block' })
126          .appendTo(inside ? this.$element : document.body)
127
128        pos = this.getPosition(inside)
129
130        actualWidth = $tip[0].offsetWidth
131        actualHeight = $tip[0].offsetHeight
132
133        switch (inside ? placement.split(' ')[1] : placement) {
134          case 'bottom':
135            tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
136            break
137          case 'top':
138            tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
139            break
140          case 'left':
141            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}
142            break
143          case 'right':
144            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
145            break
146        }
147
148        $tip
149          .css(tp)
150          .addClass(placement)
151          .addClass('in')
152      }
153    }
154
155  , setContent: function () {
156      var $tip = this.tip()
157      $tip.find('.tooltip-inner').html(this.getTitle())
158      $tip.removeClass('fade in top bottom left right')
159    }
160
161  , hide: function () {
162      var that = this
163        , $tip = this.tip()
164
165      $tip.removeClass('in')
166
167      function removeWithAnimation() {
168        var timeout = setTimeout(function () {

169          $tip.off($.support.transition.end).remove()
170        }, 500)
171
172        $tip.one($.support.transition.end, function () {
173          clearTimeout(timeout)
174          $tip.remove()
175        })
176      }
177
178      $.support.transition && this.$tip.hasClass('fade') ?
179        removeWithAnimation() :
180        $tip.remove()
181    }
182
183  , fixTitle: function () {
184      var $e = this.$element
185      if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
186        $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
187      }
188    }
189
190  , hasContent: function () {
191      return this.getTitle()
192    }
193
194  , getPosition: function (inside) {
195      return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
196        width: this.$element[0].offsetWidth
197      , height: this.$element[0].offsetHeight
198      })
199    }
200
201  , getTitle: function () {
202      var title
203        , $e = this.$element
204        , o = this.options
205
206      title = $e.attr('data-original-title')
207        || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)
208
209      title = title.toString().replace(/(^\s*|\s*$)/, "")
210
211      return title
212    }
213
214  , tip: function () {
215      return this.$tip = this.$tip || $(this.options.template)
216    }
217
218  , validate: function () {
219      if (!this.$element[0].parentNode) {
220        this.hide()
221        this.$element = null
222        this.options = null
223      }
224    }
225
226  , enable: function () {
227      this.enabled = true
228    }
229
230  , disable: function () {
231      this.enabled = false
232    }
233
234  , toggleEnabled: function () {
235      this.enabled = !this.enabled
236    }
237
238  , toggle: function () {
239      this[this.tip().hasClass('in') ? 'hide' : 'show']()
240    }
241
242  }
243
244
245 /* TOOLTIP PLUGIN DEFINITION
246  * ========================= */
247
248  $.fn.tooltip = function ( option ) {
249    return this.each(function () {
250      var $this = $(this)
251        , data = $this.data('tooltip')
252        , options = typeof option == 'object' && option
253      if (!data) $this.data('tooltip', (data = new Tooltip(this, options)))
254      if (typeof option == 'string') data[option]()
255    })
256  }
257
258  $.fn.tooltip.Constructor = Tooltip
259
260  $.fn.tooltip.defaults = {
261    animation: true
262  , delay: 0
263  , selector: false
264  , placement: 'top'
265  , trigger: 'hover'
266  , title: ''
267  , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
268  }
269
270}( window.jQuery )