tooltip.js 17 KB
Newer Older
1
2
3
4
5
6
7
8
'use strict';

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

/**
 * --------------------------------------------------------------------------
fat's avatar
fat committed
9
 * Bootstrap (v4.0.0): tooltip.js
10
11
12
13
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * --------------------------------------------------------------------------
 */

fat's avatar
fat committed
14
var Tooltip = (function ($) {
15
16
17
18
19
20
21
22
23
24

  /**
   * ------------------------------------------------------------------------
   * Constants
   * ------------------------------------------------------------------------
   */

  var NAME = 'tooltip';
  var VERSION = '4.0.0';
  var DATA_KEY = 'bs.tooltip';
fat's avatar
fat committed
25
  var EVENT_KEY = '.' + DATA_KEY;
26
27
28
29
30
31
32
33
34
35
36
37
  var JQUERY_NO_CONFLICT = $.fn[NAME];
  var TRANSITION_DURATION = 150;
  var CLASS_PREFIX = 'bs-tether';

  var Default = {
    animation: true,
    template: '<div class="tooltip" role="tooltip">' + '<div class="tooltip-arrow"></div>' + '<div class="tooltip-inner"></div></div>',
    trigger: 'hover focus',
    title: '',
    delay: 0,
    html: false,
    selector: false,
fat's avatar
fat committed
38
    placement: 'top',
39
    offset: '0 0',
fat's avatar
fat committed
40
41
42
43
44
45
    constraints: []
  };

  var DefaultType = {
    animation: 'boolean',
    template: 'string',
XhmikosR's avatar
XhmikosR committed
46
    title: '(string|element|function)',
fat's avatar
fat committed
47
48
49
50
51
52
53
    trigger: 'string',
    delay: '(number|object)',
    html: 'boolean',
    selector: '(string|boolean)',
    placement: '(string|function)',
    offset: 'string',
    constraints: 'array'
54
55
  };

fat's avatar
fat committed
56
57
58
59
60
  var AttachmentMap = {
    TOP: 'bottom center',
    RIGHT: 'middle left',
    BOTTOM: 'top center',
    LEFT: 'middle right'
61
62
63
64
65
66
67
68
  };

  var HoverState = {
    IN: 'in',
    OUT: 'out'
  };

  var Event = {
fat's avatar
fat committed
69
70
71
72
73
74
75
76
77
78
    HIDE: 'hide' + EVENT_KEY,
    HIDDEN: 'hidden' + EVENT_KEY,
    SHOW: 'show' + EVENT_KEY,
    SHOWN: 'shown' + EVENT_KEY,
    INSERTED: 'inserted' + EVENT_KEY,
    CLICK: 'click' + EVENT_KEY,
    FOCUSIN: 'focusin' + EVENT_KEY,
    FOCUSOUT: 'focusout' + EVENT_KEY,
    MOUSEENTER: 'mouseenter' + EVENT_KEY,
    MOUSELEAVE: 'mouseleave' + EVENT_KEY
79
80
81
82
83
84
85
86
87
  };

  var ClassName = {
    FADE: 'fade',
    IN: 'in'
  };

  var Selector = {
    TOOLTIP: '.tooltip',
88
89
    TOOLTIP_INNER: '.tooltip-inner'
  };
90
91

  var TetherClass = {
fat's avatar
fat committed
92
93
94
95
96
97
98
99
100
    element: false,
    enabled: false
  };

  var Trigger = {
    HOVER: 'hover',
    FOCUS: 'focus',
    CLICK: 'click',
    MANUAL: 'manual'
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
  };

  /**
   * ------------------------------------------------------------------------
   * Class Definition
   * ------------------------------------------------------------------------
   */

  var Tooltip = (function () {
    function Tooltip(element, config) {
      _classCallCheck(this, Tooltip);

      // private
      this._isEnabled = true;
      this._timeout = 0;
      this._hoverState = '';
      this._activeTrigger = {};
fat's avatar
fat committed
118
      this._tether = null;
119
120
121
122
123
124
125
126
127

      // protected
      this.element = element;
      this.config = this._getConfig(config);
      this.tip = null;

      this._setListeners();
    }

Jacob Thornton's avatar
Jacob Thornton committed
128
129
130
131
132
133
134
135
    /**
     * ------------------------------------------------------------------------
     * jQuery
     * ------------------------------------------------------------------------
     */

    // getters

136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
    _createClass(Tooltip, [{
      key: 'enable',

      // public

      value: function enable() {
        this._isEnabled = true;
      }
    }, {
      key: 'disable',
      value: function disable() {
        this._isEnabled = false;
      }
    }, {
      key: 'toggleEnabled',
      value: function toggleEnabled() {
        this._isEnabled = !this._isEnabled;
      }
    }, {
      key: 'toggle',
      value: function toggle(event) {
        if (event) {
Mark Otto's avatar
Mark Otto committed
158
159
          var dataKey = this.constructor.DATA_KEY;
          var context = $(event.currentTarget).data(dataKey);
160
161
162

          if (!context) {
            context = new this.constructor(event.currentTarget, this._getDelegateConfig());
fat's avatar
fat committed
163
            $(event.currentTarget).data(dataKey, context);
164
165
166
167
168
169
170
171
172
173
          }

          context._activeTrigger.click = !context._activeTrigger.click;

          if (context._isWithActiveTrigger()) {
            context._enter(null, context);
          } else {
            context._leave(null, context);
          }
        } else {
Mark Otto's avatar
Mark Otto committed
174
175
176
177
178
179
180

          if ($(this.getTipElement()).hasClass(ClassName.IN)) {
            this._leave(null, this);
            return;
          }

          this._enter(null, this);
181
182
183
        }
      }
    }, {
fat's avatar
fat committed
184
185
      key: 'dispose',
      value: function dispose() {
186
        clearTimeout(this._timeout);
fat's avatar
fat committed
187

fat's avatar
fat committed
188
        this.cleanupTether();
fat's avatar
fat committed
189

fat's avatar
fat committed
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
        $.removeData(this.element, this.constructor.DATA_KEY);

        $(this.element).off(this.constructor.EVENT_KEY);

        if (this.tip) {
          $(this.tip).remove();
        }

        this._isEnabled = null;
        this._timeout = null;
        this._hoverState = null;
        this._activeTrigger = null;
        this._tether = null;

        this.element = null;
        this.config = null;
        this.tip = null;
207
208
209
210
      }
    }, {
      key: 'show',
      value: function show() {
fat's avatar
fat committed
211
        var _this = this;
212

fat's avatar
fat committed
213
        var showEvent = $.Event(this.constructor.Event.SHOW);
214
215
216
217
218
219
220
221
222
223
224

        if (this.isWithContent() && this._isEnabled) {
          $(this.element).trigger(showEvent);

          var isInTheDom = $.contains(this.element.ownerDocument.documentElement, this.element);

          if (showEvent.isDefaultPrevented() || !isInTheDom) {
            return;
          }

          var tip = this.getTipElement();
fat's avatar
fat committed
225
          var tipId = Util.getUID(this.constructor.NAME);
226
227
228
229
230
231
232
233
234
235

          tip.setAttribute('id', tipId);
          this.element.setAttribute('aria-describedby', tipId);

          this.setContent();

          if (this.config.animation) {
            $(tip).addClass(ClassName.FADE);
          }

fat's avatar
fat committed
236
          var placement = typeof this.config.placement === 'function' ? this.config.placement.call(this, tip, this.element) : this.config.placement;
237

fat's avatar
fat committed
238
          var attachment = this._getAttachment(placement);
239

fat's avatar
fat committed
240
          $(tip).data(this.constructor.DATA_KEY, this).appendTo(document.body);
241

fat's avatar
fat committed
242
          $(this.element).trigger(this.constructor.Event.INSERTED);
243

fat's avatar
fat committed
244
          this._tether = new Tether({
Mark Otto's avatar
Mark Otto committed
245
            attachment: attachment,
fat's avatar
fat committed
246
            element: tip,
247
248
249
250
251
252
253
254
            target: this.element,
            classes: TetherClass,
            classPrefix: CLASS_PREFIX,
            offset: this.config.offset,
            constraints: this.config.constraints
          });

          Util.reflow(tip);
fat's avatar
fat committed
255
          this._tether.position();
256
257
258
259

          $(tip).addClass(ClassName.IN);

          var complete = function complete() {
fat's avatar
fat committed
260
261
            var prevHoverState = _this._hoverState;
            _this._hoverState = null;
262

fat's avatar
fat committed
263
            $(_this.element).trigger(_this.constructor.Event.SHOWN);
264
265

            if (prevHoverState === HoverState.OUT) {
fat's avatar
fat committed
266
              _this._leave(null, _this);
267
268
269
            }
          };

Mark Otto's avatar
Mark Otto committed
270
271
272
273
274
275
          if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
            $(this.tip).one(Util.TRANSITION_END, complete).emulateTransitionEnd(Tooltip._TRANSITION_DURATION);
            return;
          }

          complete();
276
277
278
279
280
        }
      }
    }, {
      key: 'hide',
      value: function hide(callback) {
fat's avatar
fat committed
281
        var _this2 = this;
282
283

        var tip = this.getTipElement();
fat's avatar
fat committed
284
        var hideEvent = $.Event(this.constructor.Event.HIDE);
285
        var complete = function complete() {
fat's avatar
fat committed
286
          if (_this2._hoverState !== HoverState.IN && tip.parentNode) {
287
288
289
            tip.parentNode.removeChild(tip);
          }

fat's avatar
fat committed
290
291
292
          _this2.element.removeAttribute('aria-describedby');
          $(_this2.element).trigger(_this2.constructor.Event.HIDDEN);
          _this2.cleanupTether();
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318

          if (callback) {
            callback();
          }
        };

        $(this.element).trigger(hideEvent);

        if (hideEvent.isDefaultPrevented()) {
          return;
        }

        $(tip).removeClass(ClassName.IN);

        if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {

          $(tip).one(Util.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
        } else {
          complete();
        }

        this._hoverState = '';
      }

      // protected

Jacob Thornton's avatar
Jacob Thornton committed
319
320
    }, {
      key: 'isWithContent',
321
      value: function isWithContent() {
Mark Otto's avatar
Mark Otto committed
322
        return Boolean(this.getTitle());
323
324
325
326
327
328
329
330
331
      }
    }, {
      key: 'getTipElement',
      value: function getTipElement() {
        return this.tip = this.tip || $(this.config.template)[0];
      }
    }, {
      key: 'setContent',
      value: function setContent() {
XhmikosR's avatar
XhmikosR committed
332
        var $tip = $(this.getTipElement());
333

XhmikosR's avatar
XhmikosR committed
334
        this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle());
335

XhmikosR's avatar
XhmikosR committed
336
        $tip.removeClass(ClassName.FADE).removeClass(ClassName.IN);
337
338
339

        this.cleanupTether();
      }
XhmikosR's avatar
XhmikosR committed
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
    }, {
      key: 'setElementContent',
      value: function setElementContent($element, content) {
        var html = this.config.html;
        if (typeof content === 'object' && (content.nodeType || content.jquery)) {
          // content is a DOM node or a jQuery
          if (html) {
            if (!$(content).parent().is($element)) {
              $element.empty().append(content);
            }
          } else {
            $element.text($(content).text());
          }
        } else {
          $element[html ? 'html' : 'text'](content);
        }
      }
357
358
359
360
361
362
363
364
365
366
367
368
369
370
    }, {
      key: 'getTitle',
      value: function getTitle() {
        var title = this.element.getAttribute('data-original-title');

        if (!title) {
          title = typeof this.config.title === 'function' ? this.config.title.call(this.element) : this.config.title;
        }

        return title;
      }
    }, {
      key: 'cleanupTether',
      value: function cleanupTether() {
fat's avatar
fat committed
371
372
        if (this._tether) {
          this._tether.destroy();
373
374
375
376

          // clean up after tether's junk classes
          // remove after they fix issue
          // (https://github.com/HubSpot/tether/issues/36)
fat's avatar
fat committed
377
378
          $(this.element).removeClass(this._removeTetherClasses);
          $(this.tip).removeClass(this._removeTetherClasses);
379
380
381
382
383
        }
      }

      // private

Jacob Thornton's avatar
Jacob Thornton committed
384
385
    }, {
      key: '_getAttachment',
fat's avatar
fat committed
386
387
388
389
390
      value: function _getAttachment(placement) {
        return AttachmentMap[placement.toUpperCase()];
      }
    }, {
      key: '_setListeners',
391
      value: function _setListeners() {
fat's avatar
fat committed
392
        var _this3 = this;
393
394
395
396
397

        var triggers = this.config.trigger.split(' ');

        triggers.forEach(function (trigger) {
          if (trigger === 'click') {
fat's avatar
fat committed
398
            $(_this3.element).on(_this3.constructor.Event.CLICK, _this3.config.selector, $.proxy(_this3.toggle, _this3));
fat's avatar
fat committed
399
          } else if (trigger !== Trigger.MANUAL) {
Mark Otto's avatar
Mark Otto committed
400
401
            var eventIn = trigger === Trigger.HOVER ? _this3.constructor.Event.MOUSEENTER : _this3.constructor.Event.FOCUSIN;
            var eventOut = trigger === Trigger.HOVER ? _this3.constructor.Event.MOUSELEAVE : _this3.constructor.Event.FOCUSOUT;
402

fat's avatar
fat committed
403
            $(_this3.element).on(eventIn, _this3.config.selector, $.proxy(_this3._enter, _this3)).on(eventOut, _this3.config.selector, $.proxy(_this3._leave, _this3));
404
405
406
407
408
409
410
411
412
413
414
415
          }
        });

        if (this.config.selector) {
          this.config = $.extend({}, this.config, {
            trigger: 'manual',
            selector: ''
          });
        } else {
          this._fixTitle();
        }
      }
fat's avatar
fat committed
416
417
418
419
420
    }, {
      key: '_removeTetherClasses',
      value: function _removeTetherClasses(i, css) {
        return ((css.baseVal || css).match(new RegExp('(^|\\s)' + CLASS_PREFIX + '-\\S+', 'g')) || []).join(' ');
      }
421
422
423
424
425
426
427
428
429
430
431
432
    }, {
      key: '_fixTitle',
      value: function _fixTitle() {
        var titleType = typeof this.element.getAttribute('data-original-title');
        if (this.element.getAttribute('title') || titleType !== 'string') {
          this.element.setAttribute('data-original-title', this.element.getAttribute('title') || '');
          this.element.setAttribute('title', '');
        }
      }
    }, {
      key: '_enter',
      value: function _enter(event, context) {
fat's avatar
fat committed
433
434
435
        var dataKey = this.constructor.DATA_KEY;

        context = context || $(event.currentTarget).data(dataKey);
436
437
438

        if (!context) {
          context = new this.constructor(event.currentTarget, this._getDelegateConfig());
fat's avatar
fat committed
439
          $(event.currentTarget).data(dataKey, context);
440
441
442
        }

        if (event) {
Mark Otto's avatar
Mark Otto committed
443
          context._activeTrigger[event.type === 'focusin' ? Trigger.FOCUS : Trigger.HOVER] = true;
444
445
        }

fat's avatar
fat committed
446
447
        if ($(context.getTipElement()).hasClass(ClassName.IN) || context._hoverState === HoverState.IN) {
          context._hoverState = HoverState.IN;
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
          return;
        }

        clearTimeout(context._timeout);

        context._hoverState = HoverState.IN;

        if (!context.config.delay || !context.config.delay.show) {
          context.show();
          return;
        }

        context._timeout = setTimeout(function () {
          if (context._hoverState === HoverState.IN) {
            context.show();
          }
        }, context.config.delay.show);
      }
    }, {
      key: '_leave',
      value: function _leave(event, context) {
fat's avatar
fat committed
469
470
471
        var dataKey = this.constructor.DATA_KEY;

        context = context || $(event.currentTarget).data(dataKey);
472
473
474

        if (!context) {
          context = new this.constructor(event.currentTarget, this._getDelegateConfig());
fat's avatar
fat committed
475
          $(event.currentTarget).data(dataKey, context);
476
477
478
        }

        if (event) {
Mark Otto's avatar
Mark Otto committed
479
          context._activeTrigger[event.type === 'focusout' ? Trigger.FOCUS : Trigger.HOVER] = false;
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
        }

        if (context._isWithActiveTrigger()) {
          return;
        }

        clearTimeout(context._timeout);

        context._hoverState = HoverState.OUT;

        if (!context.config.delay || !context.config.delay.hide) {
          context.hide();
          return;
        }

        context._timeout = setTimeout(function () {
          if (context._hoverState === HoverState.OUT) {
            context.hide();
          }
        }, context.config.delay.hide);
      }
    }, {
      key: '_isWithActiveTrigger',
      value: function _isWithActiveTrigger() {
        for (var trigger in this._activeTrigger) {
          if (this._activeTrigger[trigger]) {
            return true;
          }
        }

        return false;
      }
    }, {
      key: '_getConfig',
      value: function _getConfig(config) {
fat's avatar
fat committed
515
        config = $.extend({}, this.constructor.Default, $(this.element).data(), config);
516
517
518

        if (config.delay && typeof config.delay === 'number') {
          config.delay = {
fat's avatar
fat committed
519
520
            show: config.delay,
            hide: config.delay
521
522
523
          };
        }

fat's avatar
fat committed
524
525
        Util.typeCheckConfig(NAME, config, this.constructor.DefaultType);

526
527
528
529
530
531
532
533
534
        return config;
      }
    }, {
      key: '_getDelegateConfig',
      value: function _getDelegateConfig() {
        var config = {};

        if (this.config) {
          for (var key in this.config) {
Mark Otto's avatar
Mark Otto committed
535
536
            if (this.constructor.Default[key] !== this.config[key]) {
              config[key] = this.config[key];
537
538
539
540
541
542
            }
          }
        }

        return config;
      }
Jacob Thornton's avatar
Jacob Thornton committed
543
544
545

      // static

546
    }], [{
Jacob Thornton's avatar
Jacob Thornton committed
547
548
549
550
551
552
553
554
555
      key: '_jQueryInterface',
      value: function _jQueryInterface(config) {
        return this.each(function () {
          var data = $(this).data(DATA_KEY);
          var _config = typeof config === 'object' ? config : null;

          if (!data && /destroy|hide/.test(config)) {
            return;
          }
556

Jacob Thornton's avatar
Jacob Thornton committed
557
558
559
560
          if (!data) {
            data = new Tooltip(this, _config);
            $(this).data(DATA_KEY, data);
          }
561

Jacob Thornton's avatar
Jacob Thornton committed
562
          if (typeof config === 'string') {
Chris Rebert's avatar
Chris Rebert committed
563
564
565
            if (data[config] === undefined) {
              throw new Error('No method named "' + config + '"');
            }
Jacob Thornton's avatar
Jacob Thornton committed
566
567
568
569
570
571
572
            data[config]();
          }
        });
      }
    }, {
      key: 'VERSION',
      get: function get() {
573
574
575
576
        return VERSION;
      }
    }, {
      key: 'Default',
Jacob Thornton's avatar
Jacob Thornton committed
577
      get: function get() {
578
579
        return Default;
      }
fat's avatar
fat committed
580
581
    }, {
      key: 'NAME',
Jacob Thornton's avatar
Jacob Thornton committed
582
      get: function get() {
fat's avatar
fat committed
583
584
585
586
        return NAME;
      }
    }, {
      key: 'DATA_KEY',
Jacob Thornton's avatar
Jacob Thornton committed
587
      get: function get() {
fat's avatar
fat committed
588
589
590
591
        return DATA_KEY;
      }
    }, {
      key: 'Event',
Jacob Thornton's avatar
Jacob Thornton committed
592
      get: function get() {
fat's avatar
fat committed
593
594
        return Event;
      }
fat's avatar
fat committed
595
596
    }, {
      key: 'EVENT_KEY',
Jacob Thornton's avatar
Jacob Thornton committed
597
      get: function get() {
fat's avatar
fat committed
598
599
        return EVENT_KEY;
      }
fat's avatar
fat committed
600
601
    }, {
      key: 'DefaultType',
Jacob Thornton's avatar
Jacob Thornton committed
602
      get: function get() {
fat's avatar
fat committed
603
604
        return DefaultType;
      }
605
606
607
608
609
610
611
612
613
614
615
616
617
618
    }]);

    return Tooltip;
  })();

  $.fn[NAME] = Tooltip._jQueryInterface;
  $.fn[NAME].Constructor = Tooltip;
  $.fn[NAME].noConflict = function () {
    $.fn[NAME] = JQUERY_NO_CONFLICT;
    return Tooltip._jQueryInterface;
  };

  return Tooltip;
})(jQuery);
Jacob Thornton's avatar
Jacob Thornton committed
619
//# sourceMappingURL=tooltip.js.map