mirror of
https://github.com/twbs/bootstrap.git
synced 2025-10-03 16:51:54 +02:00
build
This commit is contained in:
167
js/dist/tooltip.js
vendored
167
js/dist/tooltip.js
vendored
@@ -14,11 +14,11 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
||||
var Tooltip = function ($) {
|
||||
|
||||
/**
|
||||
* Check for Tether dependency
|
||||
* Tether - http://tether.io/
|
||||
* Check for Popper dependency
|
||||
* Popper - https://popper.js.org
|
||||
*/
|
||||
if (typeof Tether === 'undefined') {
|
||||
throw new Error('Bootstrap tooltips require Tether (http://tether.io/)');
|
||||
if (typeof Popper === 'undefined') {
|
||||
throw new Error('Bootstrap tooltips require Popper.js (https://popper.js.org)');
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -33,22 +33,8 @@ var Tooltip = function ($) {
|
||||
var EVENT_KEY = '.' + DATA_KEY;
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
var TRANSITION_DURATION = 150;
|
||||
var CLASS_PREFIX = 'bs-tether';
|
||||
var TETHER_PREFIX_REGEX = new RegExp('(^|\\s)' + CLASS_PREFIX + '\\S+', 'g');
|
||||
|
||||
var Default = {
|
||||
animation: true,
|
||||
template: '<div class="tooltip" role="tooltip">' + '<div class="tooltip-inner"></div></div>',
|
||||
trigger: 'hover focus',
|
||||
title: '',
|
||||
delay: 0,
|
||||
html: false,
|
||||
selector: false,
|
||||
placement: 'top',
|
||||
offset: '0 0',
|
||||
constraints: [],
|
||||
container: false
|
||||
};
|
||||
var CLASS_PREFIX = 'bs-tooltip';
|
||||
var BSCLS_PREFIX_REGEX = new RegExp('(^|\\s)' + CLASS_PREFIX + '\\S+', 'g');
|
||||
|
||||
var DefaultType = {
|
||||
animation: 'boolean',
|
||||
@@ -59,16 +45,30 @@ var Tooltip = function ($) {
|
||||
html: 'boolean',
|
||||
selector: '(string|boolean)',
|
||||
placement: '(string|function)',
|
||||
offset: 'string',
|
||||
constraints: 'array',
|
||||
container: '(string|element|boolean)'
|
||||
offset: '(number|string)',
|
||||
container: '(string|element|boolean)',
|
||||
fallbackPlacement: '(string|array)'
|
||||
};
|
||||
|
||||
var AttachmentMap = {
|
||||
TOP: 'bottom center',
|
||||
RIGHT: 'middle left',
|
||||
BOTTOM: 'top center',
|
||||
LEFT: 'middle right'
|
||||
TOP: 'top',
|
||||
RIGHT: 'right',
|
||||
BOTTOM: 'bottom',
|
||||
LEFT: 'left'
|
||||
};
|
||||
|
||||
var Default = {
|
||||
animation: true,
|
||||
template: '<div class="tooltip" role="tooltip">' + '<div class="arrow"></div>' + '<div class="tooltip-inner"></div></div>',
|
||||
trigger: 'hover focus',
|
||||
title: '',
|
||||
delay: 0,
|
||||
html: false,
|
||||
selector: false,
|
||||
placement: 'top',
|
||||
offset: 0,
|
||||
container: false,
|
||||
fallbackPlacement: 'flip'
|
||||
};
|
||||
|
||||
var HoverState = {
|
||||
@@ -99,11 +99,6 @@ var Tooltip = function ($) {
|
||||
TOOLTIP_INNER: '.tooltip-inner'
|
||||
};
|
||||
|
||||
var TetherClass = {
|
||||
element: false,
|
||||
enabled: false
|
||||
};
|
||||
|
||||
var Trigger = {
|
||||
HOVER: 'hover',
|
||||
FOCUS: 'focus',
|
||||
@@ -126,7 +121,7 @@ var Tooltip = function ($) {
|
||||
this._timeout = 0;
|
||||
this._hoverState = '';
|
||||
this._activeTrigger = {};
|
||||
this._tether = null;
|
||||
this._popper = null;
|
||||
|
||||
// protected
|
||||
this.element = element;
|
||||
@@ -183,8 +178,6 @@ var Tooltip = function ($) {
|
||||
Tooltip.prototype.dispose = function dispose() {
|
||||
clearTimeout(this._timeout);
|
||||
|
||||
this.cleanupTether();
|
||||
|
||||
$.removeData(this.element, this.constructor.DATA_KEY);
|
||||
|
||||
$(this.element).off(this.constructor.EVENT_KEY);
|
||||
@@ -198,7 +191,10 @@ var Tooltip = function ($) {
|
||||
this._timeout = null;
|
||||
this._hoverState = null;
|
||||
this._activeTrigger = null;
|
||||
this._tether = null;
|
||||
if (this._popper !== null) {
|
||||
this._popper.destroy();
|
||||
}
|
||||
this._popper = null;
|
||||
|
||||
this.element = null;
|
||||
this.config = null;
|
||||
@@ -237,6 +233,7 @@ var Tooltip = function ($) {
|
||||
var placement = typeof this.config.placement === 'function' ? this.config.placement.call(this, tip, this.element) : this.config.placement;
|
||||
|
||||
var attachment = this._getAttachment(placement);
|
||||
this.addAttachmentClass(attachment);
|
||||
|
||||
var container = this.config.container === false ? document.body : $(this.config.container);
|
||||
|
||||
@@ -248,20 +245,26 @@ var Tooltip = function ($) {
|
||||
|
||||
$(this.element).trigger(this.constructor.Event.INSERTED);
|
||||
|
||||
this._tether = new Tether({
|
||||
attachment: attachment,
|
||||
element: tip,
|
||||
target: this.element,
|
||||
classes: TetherClass,
|
||||
classPrefix: CLASS_PREFIX,
|
||||
offset: this.config.offset,
|
||||
constraints: this.config.constraints,
|
||||
addTargetClasses: false
|
||||
this._popper = new Popper(this.element, tip, {
|
||||
placement: attachment,
|
||||
modifiers: {
|
||||
offset: {
|
||||
offset: this.config.offset
|
||||
},
|
||||
flip: {
|
||||
behavior: this.config.fallbackPlacement
|
||||
}
|
||||
},
|
||||
onCreate: function onCreate(data) {
|
||||
if (data.originalPlacement !== data.placement) {
|
||||
_this._handlePopperPlacementChange(data);
|
||||
}
|
||||
},
|
||||
onUpdate: function onUpdate(data) {
|
||||
_this._handlePopperPlacementChange(data);
|
||||
}
|
||||
});
|
||||
|
||||
Util.reflow(tip);
|
||||
this._tether.position();
|
||||
|
||||
$(tip).addClass(ClassName.SHOW);
|
||||
|
||||
// if this is a touch-enabled device we add extra
|
||||
@@ -273,6 +276,9 @@ var Tooltip = function ($) {
|
||||
}
|
||||
|
||||
var complete = function complete() {
|
||||
if (_this.config.animation) {
|
||||
_this._fixTransition();
|
||||
}
|
||||
var prevHoverState = _this._hoverState;
|
||||
_this._hoverState = null;
|
||||
|
||||
@@ -285,10 +291,9 @@ var Tooltip = function ($) {
|
||||
|
||||
if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
|
||||
$(this.tip).one(Util.TRANSITION_END, complete).emulateTransitionEnd(Tooltip._TRANSITION_DURATION);
|
||||
return;
|
||||
} else {
|
||||
complete();
|
||||
}
|
||||
|
||||
complete();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -305,7 +310,9 @@ var Tooltip = function ($) {
|
||||
_this2._cleanTipClass();
|
||||
_this2.element.removeAttribute('aria-describedby');
|
||||
$(_this2.element).trigger(_this2.constructor.Event.HIDDEN);
|
||||
_this2.cleanupTether();
|
||||
if (_this2._popper !== null) {
|
||||
_this2._popper.destroy();
|
||||
}
|
||||
|
||||
if (callback) {
|
||||
callback();
|
||||
@@ -340,24 +347,30 @@ var Tooltip = function ($) {
|
||||
this._hoverState = '';
|
||||
};
|
||||
|
||||
Tooltip.prototype.update = function update() {
|
||||
if (this._popper !== null) {
|
||||
this._popper.scheduleUpdate();
|
||||
}
|
||||
};
|
||||
|
||||
// protected
|
||||
|
||||
Tooltip.prototype.isWithContent = function isWithContent() {
|
||||
return Boolean(this.getTitle());
|
||||
};
|
||||
|
||||
Tooltip.prototype.addAttachmentClass = function addAttachmentClass(attachment) {
|
||||
$(this.getTipElement()).addClass(CLASS_PREFIX + '-' + attachment);
|
||||
};
|
||||
|
||||
Tooltip.prototype.getTipElement = function getTipElement() {
|
||||
return this.tip = this.tip || $(this.config.template)[0];
|
||||
};
|
||||
|
||||
Tooltip.prototype.setContent = function setContent() {
|
||||
var $tip = $(this.getTipElement());
|
||||
|
||||
this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle());
|
||||
|
||||
$tip.removeClass(ClassName.FADE + ' ' + ClassName.SHOW);
|
||||
|
||||
this.cleanupTether();
|
||||
};
|
||||
|
||||
Tooltip.prototype.setElementContent = function setElementContent($element, content) {
|
||||
@@ -386,26 +399,12 @@ var Tooltip = function ($) {
|
||||
return title;
|
||||
};
|
||||
|
||||
Tooltip.prototype.cleanupTether = function cleanupTether() {
|
||||
if (this._tether) {
|
||||
this._tether.destroy();
|
||||
}
|
||||
};
|
||||
|
||||
// private
|
||||
|
||||
Tooltip.prototype._getAttachment = function _getAttachment(placement) {
|
||||
return AttachmentMap[placement.toUpperCase()];
|
||||
};
|
||||
|
||||
Tooltip.prototype._cleanTipClass = function _cleanTipClass() {
|
||||
var $tip = $(this.getTipElement());
|
||||
var tabClass = $tip.attr('class').match(TETHER_PREFIX_REGEX);
|
||||
if (tabClass !== null && tabClass.length > 0) {
|
||||
$tip.removeClass(tabClass.join(''));
|
||||
}
|
||||
};
|
||||
|
||||
Tooltip.prototype._setListeners = function _setListeners() {
|
||||
var _this3 = this;
|
||||
|
||||
@@ -566,6 +565,32 @@ var Tooltip = function ($) {
|
||||
return config;
|
||||
};
|
||||
|
||||
Tooltip.prototype._cleanTipClass = function _cleanTipClass() {
|
||||
var $tip = $(this.getTipElement());
|
||||
var tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX);
|
||||
if (tabClass !== null && tabClass.length > 0) {
|
||||
$tip.removeClass(tabClass.join(''));
|
||||
}
|
||||
};
|
||||
|
||||
Tooltip.prototype._handlePopperPlacementChange = function _handlePopperPlacementChange(data) {
|
||||
this._cleanTipClass();
|
||||
this.addAttachmentClass(this._getAttachment(data.placement));
|
||||
};
|
||||
|
||||
Tooltip.prototype._fixTransition = function _fixTransition() {
|
||||
var tip = this.getTipElement();
|
||||
var initConfigAnimation = this.config.animation;
|
||||
if (tip.getAttribute('x-placement') !== null) {
|
||||
return;
|
||||
}
|
||||
$(tip).removeClass(ClassName.FADE);
|
||||
this.config.animation = false;
|
||||
this.hide();
|
||||
this.show();
|
||||
this.config.animation = initConfigAnimation;
|
||||
};
|
||||
|
||||
// static
|
||||
|
||||
Tooltip._jQueryInterface = function _jQueryInterface(config) {
|
||||
@@ -645,5 +670,5 @@ var Tooltip = function ($) {
|
||||
};
|
||||
|
||||
return Tooltip;
|
||||
}(jQuery); /* global Tether */
|
||||
}(jQuery); /* global Popper */
|
||||
//# sourceMappingURL=tooltip.js.map
|
Reference in New Issue
Block a user