mirror of
https://github.com/atom/atom.git
synced 2026-04-28 03:01:47 -04:00
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:  Video after:  Released under CC0
This commit is contained in:
@@ -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
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user