From 33e25f5a5f88342cec9efd72a4402af8166511a7 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Sun, 26 Mar 2017 11:49:46 +0200 Subject: [PATCH 1/3] Fix different tooltips offset when hovering --- js/src/tooltip.js | 10 ++++++++++ js/tests/unit/tooltip.js | 16 ++++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/js/src/tooltip.js b/js/src/tooltip.js index e750dceccf6c..4180f27faa29 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -340,6 +340,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 +439,15 @@ const Tooltip = (($) => { return AttachmentMap[placement.toUpperCase()] } + _cleanTipClass() { + const $tip = $(this.getTipElement()) + if (this.config.toggle === 'tooltip') { + $tip.attr('class', 'tooltip fade') + } else { + $tip.attr('class', 'popover fade') + } + } + _setListeners() { const triggers = this.config.trigger.split(' ') diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index e1aec5551ff4..96db44786beb 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -869,4 +869,20 @@ $(function () { }) .modal('show') }) + + QUnit.test('should reset tip classes when hidden event triggered', function (assert) { + assert.expect(1) + var done = assert.async() + var $el = $('') + .appendTo('#qunit-fixture') + .bootstrapTooltip('show') + .on('hidden.bs.tooltip', function () { + var tooltip = $el.data('bs.tooltip') + var $tooltip = $(tooltip.getTipElement()) + assert.ok($tooltip[0].classList.length === 2) + done() + }) + + $el.bootstrapTooltip('hide') + }) }) From bf3a8a2c0dabd5782fd41f6cce5328bf0dc65f62 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Sun, 26 Mar 2017 12:01:26 +0200 Subject: [PATCH 2/3] Improve the way of removing tether css --- js/src/tooltip.js | 16 ++++++++++++---- js/tests/unit/tooltip.js | 5 +++-- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 4180f27faa29..1384ade24e44 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -441,10 +441,18 @@ const Tooltip = (($) => { _cleanTipClass() { const $tip = $(this.getTipElement()) - if (this.config.toggle === 'tooltip') { - $tip.attr('class', 'tooltip fade') - } else { - $tip.attr('class', 'popover fade') + let tabClassStr = $tip.attr('class') + let tabClass = tabClassStr.split(' ') + let i = 0 + while (tabClassStr.indexOf(CLASS_PREFIX) !== -1) { + if (tabClass[i].indexOf(CLASS_PREFIX) !== -1) { + $tip.removeClass(tabClass[i]) + tabClassStr = $tip.attr('class') + tabClass = tabClassStr.split(' ') + i = 0 + } else { + i++ + } } } diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index 96db44786beb..e739f06a50ad 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -871,7 +871,7 @@ $(function () { }) QUnit.test('should reset tip classes when hidden event triggered', function (assert) { - assert.expect(1) + assert.expect(2) var done = assert.async() var $el = $('') .appendTo('#qunit-fixture') @@ -879,7 +879,8 @@ $(function () { .on('hidden.bs.tooltip', function () { var tooltip = $el.data('bs.tooltip') var $tooltip = $(tooltip.getTipElement()) - assert.ok($tooltip[0].classList.length === 2) + assert.ok($tooltip.hasClass('tooltip')) + assert.ok($tooltip.hasClass('fade')) done() }) From 0fb0ca833149fe5ec8341d25b8f556b65dda646f Mon Sep 17 00:00:00 2001 From: Johann-S Date: Tue, 28 Mar 2017 11:09:46 +0200 Subject: [PATCH 3/3] Improve cleanup tether class by using a regex thanks to @vanduynslagerp --- js/src/tooltip.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 1384ade24e44..fe913e660861 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, @@ -441,18 +442,9 @@ const Tooltip = (($) => { _cleanTipClass() { const $tip = $(this.getTipElement()) - let tabClassStr = $tip.attr('class') - let tabClass = tabClassStr.split(' ') - let i = 0 - while (tabClassStr.indexOf(CLASS_PREFIX) !== -1) { - if (tabClass[i].indexOf(CLASS_PREFIX) !== -1) { - $tip.removeClass(tabClass[i]) - tabClassStr = $tip.attr('class') - tabClass = tabClassStr.split(' ') - i = 0 - } else { - i++ - } + const tabClass = $tip.attr('class').match(TETHER_PREFIX_REGEX) + if (tabClass !== null && tabClass.length > 0) { + $tip.removeClass(tabClass.join('')) } }