diff options
Diffstat (limited to 'js/dist/tooltip.js')
| -rw-r--r-- | js/dist/tooltip.js | 167 |
1 files changed, 96 insertions, 71 deletions
diff --git a/js/dist/tooltip.js b/js/dist/tooltip.js index af385927ff..75d4c38f34 100644 --- a/js/dist/tooltip.js +++ b/js/dist/tooltip.js @@ -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
\ No newline at end of file |