1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-10-03 16:51:54 +02:00
This commit is contained in:
Johann-S
2017-05-16 09:59:44 +02:00
parent 183205afb8
commit 3719ed4cb6
34 changed files with 1580 additions and 621 deletions

167
js/dist/tooltip.js vendored
View File

@@ -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