diff options
author | Chris Rebert <github@rebertia.com> | 2015-05-05 01:07:17 +0300 |
---|---|---|
committer | Chris Rebert <github@rebertia.com> | 2015-05-05 01:07:17 +0300 |
commit | aa2c5b5672f5a7b8b0419bee51023f7e9ae4acba (patch) | |
tree | 7c3fefdac766ac902f796450cc51da42b13f9829 /js | |
parent | a19441dd643c17baf7672987430c4607cfa229e9 (diff) | |
parent | 4b269037cb42cce7898d57890db40ef0cc3bd5f8 (diff) |
Merge pull request #16014 from redbmk/issue-16008
Multiple tooltip triggers don't play well together
Diffstat (limited to 'js')
-rw-r--r-- | js/tests/unit/tooltip.js | 38 | ||||
-rw-r--r-- | js/tooltip.js | 38 |
2 files changed, 70 insertions, 6 deletions
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index bdcf0bbd00..27ce6208e7 100644 --- 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 index af1483aba4..0779f139d6 100644 --- 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 () { |