From 045888fa3887f5e65658499da11c8ad737222759 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 Jan 2017 08:38:04 -0800 Subject: version bump --- js/src/tooltip.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 0c1d381b9..e750dcecc 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -5,7 +5,7 @@ import Util from './util' /** * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0-alpha.5): tooltip.js + * Bootstrap (v4.0.0-alpha.6): tooltip.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ @@ -28,7 +28,7 @@ const Tooltip = (($) => { */ const NAME = 'tooltip' - const VERSION = '4.0.0-alpha.5' + const VERSION = '4.0.0-alpha.6' const DATA_KEY = 'bs.tooltip' const EVENT_KEY = `.${DATA_KEY}` const JQUERY_NO_CONFLICT = $.fn[NAME] -- cgit v1.2.3 From 904efc043d298904d8020df7325bf01a5825a780 Mon Sep 17 00:00:00 2001 From: Johann Date: Tue, 28 Mar 2017 15:55:03 +0200 Subject: Fix different tooltips offset when hovering --- js/src/tooltip.js | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index e750dcecc..fe913e660 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -34,6 +34,7 @@ const Tooltip = (($) => { const JQUERY_NO_CONFLICT = $.fn[NAME] const TRANSITION_DURATION = 150 const CLASS_PREFIX = 'bs-tether' + const TETHER_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') const Default = { animation : true, @@ -340,6 +341,7 @@ const Tooltip = (($) => { tip.parentNode.removeChild(tip) } + this._cleanTipClass() this.element.removeAttribute('aria-describedby') $(this.element).trigger(this.constructor.Event.HIDDEN) this._isTransitioning = false @@ -438,6 +440,14 @@ const Tooltip = (($) => { return AttachmentMap[placement.toUpperCase()] } + _cleanTipClass() { + const $tip = $(this.getTipElement()) + const tabClass = $tip.attr('class').match(TETHER_PREFIX_REGEX) + if (tabClass !== null && tabClass.length > 0) { + $tip.removeClass(tabClass.join('')) + } + } + _setListeners() { const triggers = this.config.trigger.split(' ') -- cgit v1.2.3 From 48c5efa4c3c439d8720b8475ec3e372c6974a12a Mon Sep 17 00:00:00 2001 From: Pierre Vanduynslager Date: Tue, 28 Mar 2017 17:43:16 -0400 Subject: Fix JS components console error "Error: is transitioning" --- js/src/tooltip.js | 32 ++++++++++++-------------------- 1 file changed, 12 insertions(+), 20 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index fe913e660..5fd4987b9 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -124,12 +124,11 @@ const Tooltip = (($) => { constructor(element, config) { // private - this._isEnabled = true - this._timeout = 0 - this._hoverState = '' - this._activeTrigger = {} - this._isTransitioning = false - this._tether = null + this._isEnabled = true + this._timeout = 0 + this._hoverState = '' + this._activeTrigger = {} + this._tether = null // protected this.element = element @@ -250,9 +249,6 @@ const Tooltip = (($) => { const showEvent = $.Event(this.constructor.Event.SHOW) if (this.isWithContent() && this._isEnabled) { - if (this._isTransitioning) { - throw new Error('Tooltip is transitioning') - } $(this.element).trigger(showEvent) const isInTheDom = $.contains( @@ -284,9 +280,11 @@ const Tooltip = (($) => { const container = this.config.container === false ? document.body : $(this.config.container) - $(tip) - .data(this.constructor.DATA_KEY, this) - .appendTo(container) + $(tip).data(this.constructor.DATA_KEY, this) + + if (!$.contains(this.element.ownerDocument.documentElement, this.tip)) { + $(tip).appendTo(container) + } $(this.element).trigger(this.constructor.Event.INSERTED) @@ -308,8 +306,7 @@ const Tooltip = (($) => { const complete = () => { const prevHoverState = this._hoverState - this._hoverState = null - this._isTransitioning = false + this._hoverState = null $(this.element).trigger(this.constructor.Event.SHOWN) @@ -319,7 +316,6 @@ const Tooltip = (($) => { } if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) { - this._isTransitioning = true $(this.tip) .one(Util.TRANSITION_END, complete) .emulateTransitionEnd(Tooltip._TRANSITION_DURATION) @@ -333,9 +329,6 @@ const Tooltip = (($) => { hide(callback) { const tip = this.getTipElement() const hideEvent = $.Event(this.constructor.Event.HIDE) - if (this._isTransitioning) { - throw new Error('Tooltip is transitioning') - } const complete = () => { if (this._hoverState !== HoverState.SHOW && tip.parentNode) { tip.parentNode.removeChild(tip) @@ -344,7 +337,6 @@ const Tooltip = (($) => { this._cleanTipClass() this.element.removeAttribute('aria-describedby') $(this.element).trigger(this.constructor.Event.HIDDEN) - this._isTransitioning = false this.cleanupTether() if (callback) { @@ -366,7 +358,7 @@ const Tooltip = (($) => { if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) { - this._isTransitioning = true + $(tip) .one(Util.TRANSITION_END, complete) .emulateTransitionEnd(TRANSITION_DURATION) -- cgit v1.2.3 From 5142de7e592abc0a791ea3465616795c91219bcc Mon Sep 17 00:00:00 2001 From: Johann-S Date: Fri, 31 Mar 2017 10:03:54 +0200 Subject: Popover + Tooltip - fix error when content or title is a number --- js/src/tooltip.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 5fd4987b9..1ff2c4f6e 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -605,6 +605,14 @@ const Tooltip = (($) => { } } + if (config.title && typeof config.title === 'number') { + config.title = config.title.toString() + } + + if (config.content && typeof config.content === 'number') { + config.content = config.content.toString() + } + Util.typeCheckConfig( NAME, config, -- cgit v1.2.3 From ef099ad05deaa42f92c0fce903ed75010d50e317 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 20 Apr 2017 13:49:35 +0100 Subject: Add iOS hack to tooltips Same hack as in https://github.com/twbs/bootstrap/pull/22426 (modulo the selector, which is wrong in that PR and will be updated in a separate PR) to get tooltips to work correctly on iOS. Dynamically adds/removes empty (`noop`) `touchstart` event handlers to all children of `` in order to coax iOS into proper event delegation/bubbling --- js/src/tooltip.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 1ff2c4f6e..c97f49108 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -304,6 +304,15 @@ const Tooltip = (($) => { $(tip).addClass(ClassName.SHOW) + // if this is a touch-enabled device we add extra + // empty mouseover listeners to the body's immediate children; + // only needed because of broken event delegation on iOS + // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html + if ('ontouchstart' in document.documentElement && + !$(parent).closest(Selector.NAVBAR_NAV).length) { + $('body').children().on('mouseover', null, $.noop) + } + const complete = () => { const prevHoverState = this._hoverState this._hoverState = null @@ -352,6 +361,12 @@ const Tooltip = (($) => { $(tip).removeClass(ClassName.SHOW) + // if this is a touch-enabled device we remove the extra + // empty mouseover listeners we added for iOS support + if ('ontouchstart' in document.documentElement) { + $('body').children().off('mouseover', null, $.noop) + } + this._activeTrigger[Trigger.CLICK] = false this._activeTrigger[Trigger.FOCUS] = false this._activeTrigger[Trigger.HOVER] = false @@ -368,6 +383,7 @@ const Tooltip = (($) => { } this._hoverState = '' + } -- cgit v1.2.3 From fb3303f5ddff2f57c3603ceabb6668d4a3cb559c Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 20 Apr 2017 14:35:33 +0100 Subject: Fix for copy/paste error in iOS hack to tooltips (with apologies, this slipped through due to build system problems on my end) --- js/src/tooltip.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index c97f49108..47c3d8d05 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -308,8 +308,7 @@ const Tooltip = (($) => { // empty mouseover listeners to the body's immediate children; // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html - if ('ontouchstart' in document.documentElement && - !$(parent).closest(Selector.NAVBAR_NAV).length) { + if ('ontouchstart' in document.documentElement) { $('body').children().on('mouseover', null, $.noop) } -- cgit v1.2.3 From 6cf0fe878067ba46872212da92e5288fb3331312 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Thu, 6 Apr 2017 23:16:07 +0200 Subject: Use Popper for tooltip and popover --- js/src/tooltip.js | 73 +++++++++++++++++-------------------------------------- 1 file changed, 22 insertions(+), 51 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 47c3d8d05..c4c4ee2f6 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -1,4 +1,4 @@ -/* global Tether */ +/* global Popper */ import Util from './util' @@ -13,11 +13,11 @@ import Util from './util' const Tooltip = (($) => { /** - * Check for Tether dependency - * Tether - http://tether.io/ + * Check for Popper dependency + * Tether - 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 (https://popper.js.org)') } @@ -33,8 +33,6 @@ const Tooltip = (($) => { const EVENT_KEY = `.${DATA_KEY}` const JQUERY_NO_CONFLICT = $.fn[NAME] const TRANSITION_DURATION = 150 - const CLASS_PREFIX = 'bs-tether' - const TETHER_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') const Default = { animation : true, @@ -66,10 +64,10 @@ const Tooltip = (($) => { } const AttachmentMap = { - TOP : 'bottom center', - RIGHT : 'middle left', - BOTTOM : 'top center', - LEFT : 'middle right' + TOP : 'top', + RIGHT : 'right', + BOTTOM : 'bottom', + LEFT : 'left' } const HoverState = { @@ -100,11 +98,6 @@ const Tooltip = (($) => { TOOLTIP_INNER : '.tooltip-inner' } - const TetherClass = { - element : false, - enabled : false - } - const Trigger = { HOVER : 'hover', FOCUS : 'focus', @@ -128,7 +121,7 @@ const Tooltip = (($) => { this._timeout = 0 this._hoverState = '' this._activeTrigger = {} - this._tether = null + this._popper = null // protected this.element = element @@ -220,8 +213,6 @@ const Tooltip = (($) => { dispose() { clearTimeout(this._timeout) - this.cleanupTether() - $.removeData(this.element, this.constructor.DATA_KEY) $(this.element).off(this.constructor.EVENT_KEY) @@ -235,7 +226,7 @@ const Tooltip = (($) => { this._timeout = null this._hoverState = null this._activeTrigger = null - this._tether = null + this._popper = null this.element = null this.config = null @@ -288,19 +279,19 @@ const Tooltip = (($) => { $(this.element).trigger(this.constructor.Event.INSERTED) - this._tether = new Tether({ - 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 : { + arrow : { + element : Selector.TOOLTIP + }, + offset : { + offset : this.config.offset + } + } }) Util.reflow(tip) - this._tether.position() $(tip).addClass(ClassName.SHOW) @@ -342,11 +333,9 @@ const Tooltip = (($) => { tip.parentNode.removeChild(tip) } - this._cleanTipClass() this.element.removeAttribute('aria-describedby') $(this.element).trigger(this.constructor.Event.HIDDEN) - this.cleanupTether() - + this._popper.destroy() if (callback) { callback() } @@ -398,12 +387,8 @@ const Tooltip = (($) => { setContent() { const $tip = $(this.getTipElement()) - this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle()) - $tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`) - - this.cleanupTether() } setElementContent($element, content) { @@ -434,12 +419,6 @@ const Tooltip = (($) => { return title } - cleanupTether() { - if (this._tether) { - this._tether.destroy() - } - } - // private @@ -447,14 +426,6 @@ const Tooltip = (($) => { return AttachmentMap[placement.toUpperCase()] } - _cleanTipClass() { - const $tip = $(this.getTipElement()) - const tabClass = $tip.attr('class').match(TETHER_PREFIX_REGEX) - if (tabClass !== null && tabClass.length > 0) { - $tip.removeClass(tabClass.join('')) - } - } - _setListeners() { const triggers = this.config.trigger.split(' ') -- cgit v1.2.3 From 81e07ec05218d75d64454787449dcb870b5b66ec Mon Sep 17 00:00:00 2001 From: Johann-S Date: Fri, 7 Apr 2017 11:12:17 +0200 Subject: Begin to add arrow to Popover and Tooltip --- js/src/tooltip.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index c4c4ee2f6..505a8d492 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -37,6 +37,7 @@ const Tooltip = (($) => { const Default = { animation : true, template : '', trigger : 'hover focus', title : '', @@ -281,10 +282,8 @@ const Tooltip = (($) => { this._popper = new Popper(this.element, tip, { placement : attachment, + arrowElement : '.arrow', modifiers : { - arrow : { - element : Selector.TOOLTIP - }, offset : { offset : this.config.offset } @@ -335,7 +334,10 @@ const Tooltip = (($) => { this.element.removeAttribute('aria-describedby') $(this.element).trigger(this.constructor.Event.HIDDEN) - this._popper.destroy() + if (this._popper !== null) { + this._popper.destroy() + } + if (callback) { callback() } -- cgit v1.2.3 From b40b1bc396adb80944b887f72d0ae616277c852d Mon Sep 17 00:00:00 2001 From: Johann-S Date: Fri, 7 Apr 2017 13:20:34 +0200 Subject: Add attachment classes --- js/src/tooltip.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 505a8d492..fb4ff131c 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -33,6 +33,8 @@ const Tooltip = (($) => { const EVENT_KEY = `.${DATA_KEY}` const JQUERY_NO_CONFLICT = $.fn[NAME] const TRANSITION_DURATION = 150 + const CLASS_PREFIX = 'bs-tooltip' + const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') const Default = { animation : true, @@ -269,6 +271,7 @@ const Tooltip = (($) => { this.config.placement const attachment = this._getAttachment(placement) + this.addAttachmentClass(attachment) const container = this.config.container === false ? document.body : $(this.config.container) @@ -332,6 +335,7 @@ const Tooltip = (($) => { tip.parentNode.removeChild(tip) } + this._cleanTipClass() this.element.removeAttribute('aria-describedby') $(this.element).trigger(this.constructor.Event.HIDDEN) if (this._popper !== null) { @@ -383,6 +387,10 @@ const Tooltip = (($) => { return Boolean(this.getTitle()) } + addAttachmentClass(attachment) { + $(this.getTipElement()).addClass(`${CLASS_PREFIX}-${attachment}`) + } + getTipElement() { return this.tip = this.tip || $(this.config.template)[0] } @@ -624,6 +632,14 @@ const Tooltip = (($) => { return config } + _cleanTipClass() { + const $tip = $(this.getTipElement()) + const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX) + if (tabClass !== null && tabClass.length > 0) { + $tip.removeClass(tabClass.join('')) + } + } + // static -- cgit v1.2.3 From d8996a7e0a90ad2a00151c5e14bae6a37bf8e186 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Sat, 8 Apr 2017 21:13:15 +0200 Subject: Fix arrow for tooltip and popover --- js/src/tooltip.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index fb4ff131c..c380f8675 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -285,11 +285,8 @@ const Tooltip = (($) => { this._popper = new Popper(this.element, tip, { placement : attachment, - arrowElement : '.arrow', - modifiers : { - offset : { - offset : this.config.offset - } + offsets : { + popper : this.config.offset } }) @@ -632,13 +629,13 @@ const Tooltip = (($) => { return config } - _cleanTipClass() { - const $tip = $(this.getTipElement()) - const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX) - if (tabClass !== null && tabClass.length > 0) { - $tip.removeClass(tabClass.join('')) + _cleanTipClass() { + const $tip = $(this.getTipElement()) + const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX) + if (tabClass !== null && tabClass.length > 0) { + $tip.removeClass(tabClass.join('')) + } } - } // static -- cgit v1.2.3 From 54a8ab40111dacdf50fad22e6f36d2801ba653c9 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Fri, 14 Apr 2017 11:25:53 +0200 Subject: Begin to use Popper for Dropdown --- js/src/tooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index c380f8675..2c22a7ed4 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -14,7 +14,7 @@ const Tooltip = (($) => { /** * Check for Popper dependency - * Tether - https://popper.js.org + * Popper - https://popper.js.org */ if (typeof Popper === 'undefined') { throw new Error('Bootstrap tooltips require Popper (https://popper.js.org)') -- cgit v1.2.3 From c21a2b0d92ca78b63bb9ec21ca0fbf9e9206a18e Mon Sep 17 00:00:00 2001 From: Johann-S Date: Fri, 14 Apr 2017 12:05:54 +0200 Subject: Remove constraints option and check every options --- js/src/tooltip.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 2c22a7ed4..5f5e3d7bc 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -47,8 +47,7 @@ const Tooltip = (($) => { html : false, selector : false, placement : 'top', - offset : '0 0', - constraints : [], + offset : {}, container : false } @@ -61,8 +60,7 @@ const Tooltip = (($) => { html : 'boolean', selector : '(string|boolean)', placement : '(string|function)', - offset : 'string', - constraints : 'array', + offset : 'number', container : '(string|element|boolean)' } @@ -285,8 +283,10 @@ const Tooltip = (($) => { this._popper = new Popper(this.element, tip, { placement : attachment, - offsets : { - popper : this.config.offset + modifiers : { + offset : { + offset : this.config.offset + } } }) -- cgit v1.2.3 From 69de65180f750cadf5f96a774d2524f69d19beab Mon Sep 17 00:00:00 2001 From: Johann-S Date: Fri, 14 Apr 2017 13:30:55 +0200 Subject: Fix unit tests + Update Popper to 1.6.0 --- js/src/tooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 5f5e3d7bc..9995cede7 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -47,7 +47,7 @@ const Tooltip = (($) => { html : false, selector : false, placement : 'top', - offset : {}, + offset : 0, container : false } -- cgit v1.2.3 From d5fabf8de50710c5a09ecd91f4b9e961e67d7937 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Tue, 18 Apr 2017 14:02:24 +0200 Subject: Remove totaly Tether from documentation + dependencies --- js/src/tooltip.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 9995cede7..2c34ac5d7 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -17,7 +17,7 @@ const Tooltip = (($) => { * Popper - https://popper.js.org */ if (typeof Popper === 'undefined') { - throw new Error('Bootstrap tooltips require Popper (https://popper.js.org)') + throw new Error('Bootstrap tooltips require Popper.js (https://popper.js.org)') } @@ -60,7 +60,7 @@ const Tooltip = (($) => { html : 'boolean', selector : '(string|boolean)', placement : '(string|function)', - offset : 'number', + offset : '(number|string)', container : '(string|element|boolean)' } -- cgit v1.2.3 From 18e4e851e2829aedc6d1ff2b703ba5cae2c0a288 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Wed, 19 Apr 2017 10:20:50 +0200 Subject: Better placement for Dropdown + Handle flip of Tooltip/Popover --- js/src/tooltip.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 2c34ac5d7..b446d9bcc 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -287,6 +287,12 @@ const Tooltip = (($) => { offset : { offset : this.config.offset } + }, + onCreate : (data) => { + this._handlePopperPlacementChange(data) + }, + onUpdate : (data) => { + this._handlePopperPlacementChange(data) } }) @@ -637,6 +643,12 @@ const Tooltip = (($) => { } } + _handlePopperPlacementChange(data) { + if (data.originalPlacement !== data.placement) { + this._cleanTipClass() + this.addAttachmentClass(this._getAttachment(data.placement)) + } + } // static -- cgit v1.2.3 From fc8b85b62670b8396cac7fb821c025c58fa77a78 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Wed, 19 Apr 2017 10:59:10 +0200 Subject: Fix some css for the arrow of Popover/Tooltip + update documentation --- js/src/tooltip.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index b446d9bcc..a8c0ab6f1 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -289,7 +289,9 @@ const Tooltip = (($) => { } }, onCreate : (data) => { - this._handlePopperPlacementChange(data) + if (data.originalPlacement !== data.placement) { + this._handlePopperPlacementChange(data) + } }, onUpdate : (data) => { this._handlePopperPlacementChange(data) @@ -644,10 +646,8 @@ const Tooltip = (($) => { } _handlePopperPlacementChange(data) { - if (data.originalPlacement !== data.placement) { this._cleanTipClass() this.addAttachmentClass(this._getAttachment(data.placement)) - } } // static -- cgit v1.2.3 From e5a0471b0b618409e30529a5e02933d5a74a4cc5 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Wed, 19 Apr 2017 15:08:06 +0200 Subject: Add an update method to allow to update position for Tooltip/Popover/Dropdown manually --- js/src/tooltip.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index a8c0ab6f1..d50ddbb3e 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -227,6 +227,9 @@ const Tooltip = (($) => { this._timeout = null this._hoverState = null this._activeTrigger = null + if (this._popper !== null) { + this._popper.destroy() + } this._popper = null this.element = null @@ -385,6 +388,11 @@ const Tooltip = (($) => { } + update() { + if (this._popper !== null) { + this._popper.scheduleUpdate() + } + } // protected @@ -646,8 +654,8 @@ const Tooltip = (($) => { } _handlePopperPlacementChange(data) { - this._cleanTipClass() - this.addAttachmentClass(this._getAttachment(data.placement)) + this._cleanTipClass() + this.addAttachmentClass(this._getAttachment(data.placement)) } // static -- cgit v1.2.3 From 0ae9d28ba3e9c4f119a3ba0b370717993350be2c Mon Sep 17 00:00:00 2001 From: Johann-S Date: Fri, 5 May 2017 21:22:55 +0200 Subject: Add fallbackPlacement option for Tooltip and Popover --- js/src/tooltip.js | 55 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 30 insertions(+), 25 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index d50ddbb3e..eb517252e 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -36,32 +36,18 @@ const Tooltip = (($) => { const CLASS_PREFIX = 'bs-tooltip' const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g') - const Default = { - animation : true, - template : '', - trigger : 'hover focus', - title : '', - delay : 0, - html : false, - selector : false, - placement : 'top', - offset : 0, - container : false - } - const DefaultType = { - animation : 'boolean', - template : 'string', - title : '(string|element|function)', - trigger : 'string', - delay : '(number|object)', - html : 'boolean', - selector : '(string|boolean)', - placement : '(string|function)', - offset : '(number|string)', - container : '(string|element|boolean)' + animation : 'boolean', + template : 'string', + title : '(string|element|function)', + trigger : 'string', + delay : '(number|object)', + html : 'boolean', + selector : '(string|boolean)', + placement : '(string|function)', + offset : '(number|string)', + container : '(string|element|boolean)', + fallbackPlacement : '(string|array)' } const AttachmentMap = { @@ -71,6 +57,22 @@ const Tooltip = (($) => { LEFT : 'left' } + const Default = { + animation : true, + template : '', + trigger : 'hover focus', + title : '', + delay : 0, + html : false, + selector : false, + placement : 'top', + offset : 0, + container : false, + fallbackPlacement : [AttachmentMap.TOP, AttachmentMap.RIGHT, AttachmentMap.BOTTOM, AttachmentMap.LEFT] + } + const HoverState = { SHOW : 'show', OUT : 'out' @@ -289,6 +291,9 @@ const Tooltip = (($) => { modifiers : { offset : { offset : this.config.offset + }, + flip : { + behavior : this.config.fallbackPlacement } }, onCreate : (data) => { -- cgit v1.2.3 From cc455c16c3363fed5b360cdaa780e612d10caf74 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Fri, 12 May 2017 09:39:27 +0200 Subject: Fix bad position for Tooltips with animation at true --- js/src/tooltip.js | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index eb517252e..6d3db06ab 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -306,8 +306,6 @@ const Tooltip = (($) => { } }) - Util.reflow(tip) - $(tip).addClass(ClassName.SHOW) // if this is a touch-enabled device we add extra @@ -319,6 +317,9 @@ const Tooltip = (($) => { } const complete = () => { + if (this.config.animation) { + this._fixTransition() + } const prevHoverState = this._hoverState this._hoverState = null @@ -333,10 +334,10 @@ const Tooltip = (($) => { $(this.tip) .one(Util.TRANSITION_END, complete) .emulateTransitionEnd(Tooltip._TRANSITION_DURATION) - return } - - complete() + else { + complete() + } } } @@ -663,6 +664,19 @@ const Tooltip = (($) => { this.addAttachmentClass(this._getAttachment(data.placement)) } + _fixTransition() { + const tip = this.getTipElement() + const 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 static _jQueryInterface(config) { -- cgit v1.2.3 From c78cbb275b0c559f5c9436ee3df816e1f6195201 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Fri, 12 May 2017 21:22:12 +0200 Subject: Change fallbackPlacement to flip by default for Tooltips/Popovers --- js/src/tooltip.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 6d3db06ab..f447ed4ce 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -70,7 +70,7 @@ const Tooltip = (($) => { placement : 'top', offset : 0, container : false, - fallbackPlacement : [AttachmentMap.TOP, AttachmentMap.RIGHT, AttachmentMap.BOTTOM, AttachmentMap.LEFT] + fallbackPlacement : 'flip' } const HoverState = { @@ -334,8 +334,7 @@ const Tooltip = (($) => { $(this.tip) .one(Util.TRANSITION_END, complete) .emulateTransitionEnd(Tooltip._TRANSITION_DURATION) - } - else { + } else { complete() } } @@ -668,7 +667,7 @@ const Tooltip = (($) => { const tip = this.getTipElement() const initConfigAnimation = this.config.animation if (tip.getAttribute('x-placement') !== null) { - return; + return } $(tip).removeClass(ClassName.FADE) this.config.animation = false -- cgit v1.2.3 From aa36439e173720701c6eac1929c699056714df9c Mon Sep 17 00:00:00 2001 From: Johann-S Date: Tue, 23 May 2017 14:17:07 +0200 Subject: Use Popper.js to manage arrow position --- js/src/tooltip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index f447ed4ce..ceb9bc04c 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -60,7 +60,7 @@ const Tooltip = (($) => { const Default = { animation : true, template : '', trigger : 'hover focus', title : '', -- cgit v1.2.3 From 2c72af88ee177758f67bc7797b95f7dfc95f701b Mon Sep 17 00:00:00 2001 From: Johann-S Date: Wed, 24 May 2017 13:48:32 +0200 Subject: Placement auto for tooltips --- js/src/tooltip.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/src/tooltip.js') diff --git a/js/src/tooltip.js b/js/src/tooltip.js index ceb9bc04c..1d53b0470 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -51,6 +51,7 @@ const Tooltip = (($) => { } const AttachmentMap = { + AUTO : 'auto', TOP : 'top', RIGHT : 'right', BOTTOM : 'bottom', -- cgit v1.2.3