Skip to content

Allow GlTooltip delay to be customized through localStorage

Nathan Friend requested to merge nfriend-make-tooltip-delay-user-configurable into master

Background

As part of https://gitlab.com/gitlab-org/design.gitlab.com/issues/235, the UX team would like the ability to make a global change to the tooltip delay on GitLab for testing purposes. This will allow them to fine tune the show and hide delay of tooltips without a lot of back-and-forth with the development team.

@pedroms had the great idea of allowing the tooltip delay to be customized through the browser console: https://gitlab.com/gitlab-org/design.gitlab.com/issues/235#note_175246869. This MR adds this ability to @gitlab/ui. This ability is intended to be temporary and will be removed once the UX folks have had a chance to play around with different delay amounts on GitLab.com.

What does this MR do?

  • Allows the tooltip delay to be customized globally by setting a localStorage property with the key gl-tooltip-delay. This property is read when the tooltip directive is imported from @gitlab/ui.
  • Adds a (dev) dependency on jest-localstorage-mock in order to allow Jest tests to run properly with the new localStorage code.

gl-tooltip-delay

If this localStorage key is not found, no tooltip delay is configured. (The current behavior of our tooltip directive.)

To use this feature, a user can run any of the following commands in their browser console (which can be opened by pressing F12):

Make tooltips wait 1000ms before being shown:

localStorage.setItem('gl-tooltip-delay', JSON.stringify({ show: 1000 }))

Make tooltips wait 1000ms before being hidden:

localStorage.setItem('gl-tooltip-delay', JSON.stringify({ hide: 1000 }))

Make tooltips wait 500ms before being shown and 600ms before being hidden:

localStorage.setItem('gl-tooltip-delay', JSON.stringify({ show: 500, hide: 600 }))

Make tooltips wait 1000ms before being shown and 1000ms before being hidden:

localStorage.setItem('gl-tooltip-delay', JSON.stringify(1000))

To go back to the default delay, a user can remove the localStorage key:

localStorage.removeItem('gl-tooltip-delay')

Going forward

After UX has a chance to play around with the tooltip delay on GitLab.com and determines a good standard delay to be implemented, this customization feature will be removed. This optimal delay amount will then be set as the default for all tooltips within GitLab.

Notes

This MR only affects GlTooltips, i.e. tooltips that are part of a Vue template. This same change has been made for non-Vue (vanilla JS) tooltips here: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/30196

Edited by Nathan Friend

Merge request reports