Multiple tooltip triggers don't play well together

redbmk · redbmk · commit 4b269037cb42 · 2015-04-27T23:03:56.000-07:00
Fixes issue twbs#16008
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
@@ -1284,4 +1284,42 @@ $(function () {
     }, new Error('tooltip `template` option must consist of exactly 1 top-level element!'))
   })
 
+  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
@@ -21,6 +21,7 @@
     this.timeout    = null
     this.hoverState = null
     this.$element   = null
+    this.inState    = null
 
     this.init('tooltip', element, options)
   }
@@ -51,6 +52,7 @@
     this.$element  = $(element)
     this.options   = this.getOptions(options)
     this.$viewport = this.options.viewport && $($.isFunction(this.options.viewport) ? this.options.viewport.call(this, this.$element) : (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 +111,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'
@@ -130,6 +136,14 @@
     }, self.options.delay.show)
   }
 
+  Tooltip.prototype.isInStateTrue = function () {
+    for (var key in this.inState) {
+      if (this.inState[key]) return true
+    }
+
+    return false
+  }
+
   Tooltip.prototype.leave = function (obj) {
     var self = obj instanceof this.constructor ?
       obj : $(obj.currentTarget).data('bs.' + this.type)
@@ -139,6 +153,12 @@
       $(obj.currentTarget).data('bs.' + this.type, self)
     }
 
+    if (obj instanceof $.Event) {
+      self.inState[obj.type == 'focusout' ? 'focus' : 'hover'] = false
+    }
+
+    if (self.isInStateTrue()) return
+
     clearTimeout(self.timeout)
 
     self.hoverState = 'out'
@@ -438,7 +458,13 @@
       }
     }
 
-    self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
+    if (e) {
+      self.inState.click = !self.inState.click
+      if (self.isInStateTrue()) self.enter(self)
+      else self.leave(self)
+    } else {
+      self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
+    }
   }
 
   Tooltip.prototype.destroy = function () {
