From aac0e16452301a4735a668dc228b6b084b2d63d0 Mon Sep 17 00:00:00 2001 From: Scott Gonyea Date: Mon, 4 Aug 2014 13:03:11 -0700 Subject: [PATCH] Fix hover-tooltip flickering when mouse re-enters - is(':visible') seems to be the only reliable check, without a refactoring of how hoverState is used - tests need improvement --- js/tests/unit/tooltip.js | 61 ++++++++++++++++++++++++++++++++++++++++ js/tooltip.js | 5 ++++ 2 files changed, 66 insertions(+) diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index 7896c2c969..c0c6284852 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -775,4 +775,65 @@ $(function () { $circle.bootstrapTooltip('show') }) + test('should not reload the tooltip on subsequent mouseenter events', function () { + var titleHtml = function () { + var uid = $.fn.bootstrapTooltip.Constructor.prototype.getUID('tooltip') + return '

' + uid + '

' + uid + '

' + uid + '

' + } + + var $tooltip = $('some text') + .appendTo('#qunit-fixture') + + $tooltip.bootstrapTooltip({ + html: true, + animation: false, + trigger: 'hover', + delay: { show: 0, hide: 500 }, + container: $tooltip, + title: titleHtml + }) + + $('#tt-outer').trigger('mouseenter') + + var currentUid = $('#tt-content').text() + + $('#tt-content').trigger('mouseenter') + equal(currentUid, $('#tt-content').text()) + }) + + test('should not reload the tooltip if the mouse leaves and re-enters before hiding', function () { + var titleHtml = function () { + var uid = $.fn.bootstrapTooltip.Constructor.prototype.getUID('tooltip') + return '

' + uid + '

' + uid + '

' + uid + '

' + } + + var $tooltip = $('some text') + .appendTo('#qunit-fixture') + + $tooltip.bootstrapTooltip({ + html: true, + animation: false, + trigger: 'hover', + delay: { show: 0, hide: 500 }, + container: $tooltip, + title: titleHtml + }) + + var obj = $tooltip.data('bs.tooltip') + + $('#tt-outer').trigger('mouseenter') + + var currentUid = $('#tt-content').text() + + $('#tt-outer').trigger('mouseleave') + equal(currentUid, $('#tt-content').text()) + + ok(obj.hoverState == 'out', 'the tooltip hoverState should be set to "out"') + + $('#tt-content').trigger('mouseenter') + ok(obj.hoverState == 'in', 'the tooltip hoverState should be set to "in"') + + equal(currentUid, $('#tt-content').text()) + }) + }) diff --git a/js/tooltip.js b/js/tooltip.js index 0758b07eef..1444a7131b 100644 --- a/js/tooltip.js +++ b/js/tooltip.js @@ -105,6 +105,11 @@ 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)