Introduce follow through behavior for tooltips

Inside of Nuclide, we have multiple places where we have multiple icons close together that have a tooltip: the left toolbar, the bottom status bar, the debugger icons...

The current behavior is very frustrating as you've got to wait for the delay on every single one of them. But, we have a clear signal that the user wants a tooltip when s/he waits the time to see it and it's likely that moving the mouse over the next item quickly means that s/he wants to see it as well.

This pull request introduces the concept of follow through: if you have seen a tooltip, you're going to instantly see tooltip on the next element you mouse over within a short timer (300ms right now).

Test Plan:
Video before:
![](http://g.recordit.co/7PCg0hjohP.gif)

Video after:
![](http://g.recordit.co/9OnZCvy9oI.gif)

Released under CC0
This commit is contained in:
Christopher Chedeau
2016-10-28 16:12:00 -07:00
parent 0860f354ca
commit 6f5e0ec48a
2 changed files with 57 additions and 9 deletions

View File

@@ -7,6 +7,8 @@ const listen = require('./delegated-listener')
// This tooltip class is derived from Bootstrap 3, but modified to not require
// jQuery, which is an expensive dependency we want to eliminate.
var followThroughTimer = null
var Tooltip = function (element, options, viewRegistry) {
this.options = null
this.enabled = null
@@ -21,7 +23,7 @@ var Tooltip = function (element, options, viewRegistry) {
Tooltip.VERSION = '3.3.5'
Tooltip.TRANSITION_DURATION = 150
Tooltip.FOLLOW_THROUGH_DURATION = 300
Tooltip.DEFAULTS = {
animation: true,
@@ -151,7 +153,11 @@ Tooltip.prototype.enter = function (event) {
this.hoverState = 'in'
if (!this.options.delay || !this.options.delay.show) return this.show()
if (!this.options.delay ||
!this.options.delay.show ||
followThroughTimer) {
return this.show()
}
this.timeout = setTimeout(function () {
if (this.hoverState === 'in') this.show()
@@ -343,6 +349,14 @@ Tooltip.prototype.hide = function (callback) {
this.hoverState = null
clearTimeout(followThroughTimer)
followThroughTimer = setTimeout(
function () {
followThroughTimer = null
},
Tooltip.FOLLOW_THROUGH_DURATION
)
return this
}