Multiple tooltip triggers don't play well together

Fixes issue twbs#16008
redbmk · Mar 7, 2015 · b310093 · b310093
1 parent e7efd81
commit b310093
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 6 deletions.
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
@@ -1180,4 +1180,41 @@ $(function () {
     assert.strictEqual($tooltip.data('bs.tooltip'), undefined, 'should not initialize the tooltip')
   })
 
+  QUnit.test('should not remove tooltip if multiple triggers are set and one is still active', function (assert) {
+    assert.expect(41)
+    var $el = $('<button>Trigger</button>')
+      .appendTo('#qunit-fixture')
+      .bootstrapTooltip({ trigger: 'click hover focus', animation: false })
+    var tooltip = $el.data('bs.tooltip')
+    var $tooltip = tooltip.tip()
+
+    function showingTooltip() { return $tooltip.hasClass('in') || tooltip.hoverState == 'in' }
+
+    var tests = [
+        ['mouseenter', 'mouseleave'],
+
+        ['focusin', 'focusout'],
+
+        ['click', 'click'],
+
+        ['mouseenter', 'focusin', 'focusout', 'mouseleave'],
+        ['mouseenter', 'focusin', 'mouseleave', 'focusout'],
+
+        ['focusin', 'mouseenter', 'mouseleave', 'focusout'],
+        ['focusin', 'mouseenter', 'focusout', 'mouseleave'],
+
+        ['click', 'focusin', 'mouseenter', 'focusout', 'mouseleave', 'click'],
+        ['mouseenter', 'click', 'focusin', 'focusout', 'mouseleave', 'click'],
+        ['mouseenter', 'focusin', 'click', 'click', 'mouseleave', 'focusout']
+    ]
+
+    assert.ok(!showingTooltip())
+
+    $.each(tests, function (idx, triggers) {
+      for (var i = 0, len = triggers.length; i < len; i++) {
+        $el.trigger(triggers[i]);
+        assert.equal(i < (len - 1), showingTooltip())
+      }
+    })
+  })
 })
diff --git a/js/tooltip.js b/js/tooltip.js
@@ -51,6 +51,7 @@
     this.$element  = $(element)
     this.options   = this.getOptions(options)
     this.$viewport = this.options.viewport && $(this.options.viewport.selector || this.options.viewport)
+    this.inState   = { click: false, hover: false, focus: false }
 
     if (this.$element[0] instanceof document.constructor && !this.options.selector) {
       throw new Error('`selector` option must be specified when initializing ' + this.type + ' on the window.document object!')
@@ -109,16 +110,20 @@
     var self = obj instanceof this.constructor ?
       obj : $(obj.currentTarget).data('bs.' + this.type)
 
-    if (self && self.$tip && self.$tip.is(':visible')) {
-      self.hoverState = 'in'
-      return
-    }
-
     if (!self) {
       self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
       $(obj.currentTarget).data('bs.' + this.type, self)
     }
 
+    if (obj instanceof $.Event) {
+      self.inState[obj.type == 'focusin' ? 'focus' : 'hover'] = true
+    }
+
+    if (self.tip().hasClass('in') || (self.hoverState == 'in')) {
+      self.hoverState = 'in'
+      return
+    }
+
     clearTimeout(self.timeout)
 
     self.hoverState = 'in'
@@ -139,6 +144,12 @@
       $(obj.currentTarget).data('bs.' + this.type, self)
     }
 
+    if (obj instanceof $.Event) {
+      self.inState[obj.type == 'focusout' ? 'focus' : 'hover'] = false
+    }
+
+    if (self.inState.click || self.inState.focus || self.inState.hover) return
+
     clearTimeout(self.timeout)
 
     self.hoverState = 'out'
@@ -432,7 +443,13 @@
       }
     }
 
-    self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
+    if (e) {
+      self.inState.click = !self.inState.click
+      if (self.inState.click || self.inState.focus || self.inState.hover) self.enter(self)
+      else self.leave(self)
+    } else {
+      self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
+    }
   }
 
   Tooltip.prototype.destroy = function () {