Fix different tooltips offset when hovering

2 files changed, 27 insertions, 0 deletions

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index e750dceccf..fe913e6608 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(' ')
 
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index e1aec5551f..e739f06a50 100644
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -869,4 +869,21 @@ $(function () {
       })
       .modal('show')
   })
+
+  QUnit.test('should reset tip classes when hidden event triggered', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var $el = $('<a href="#" rel="tooltip" title="Test tooltip"/>')
+      .appendTo('#qunit-fixture')
+      .bootstrapTooltip('show')
+      .on('hidden.bs.tooltip', function () {
+        var tooltip = $el.data('bs.tooltip')
+        var $tooltip = $(tooltip.getTipElement())
+        assert.ok($tooltip.hasClass('tooltip'))
+        assert.ok($tooltip.hasClass('fade'))
+        done()
+      })
+
+    $el.bootstrapTooltip('hide')
+  })
 })