Skip to content

Commit

Permalink
Fix hover-tooltip flickering when mouse re-enters
Browse files Browse the repository at this point in the history
- is(':visible') seems to be the only reliable check, without a refactoring of how hoverState is used
- tests need improvement
  • Loading branch information
sgonyea authored and saranya.r committed Oct 9, 2014
1 parent 561bf45 commit 0e89542
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 0 deletions.
61 changes: 61 additions & 0 deletions js/tests/unit/tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 '<p id="tt-content">' + uid + '</p><p>' + uid + '</p><p>' + uid + '</p>'
}

var $tooltip = $('<span id="tt-outer" rel="tooltip" data-trigger="hover" data-placement="top">some text</span>')
.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 '<p id="tt-content">' + uid + '</p><p>' + uid + '</p><p>' + uid + '</p>'
}

var $tooltip = $('<span id="tt-outer" rel="tooltip" data-trigger="hover" data-placement="top">some text</span>')
.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())
})

})
5 changes: 5 additions & 0 deletions js/tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit 0e89542

Please sign in to comment.