Classifier: Add tooltips to the Button component in ImageToolbar

[goplayoutside3]

Package

lib-classifier

Linked Issue and/or Talk Post

Closes #4483
This is a small survey task enhancement purposely separate from the lib-classifier_survey-task-design-changes branch.

Describe your changes

Add Grommet Tip to the buttons in the ImageToolbar. The styling matches the tips used in lib-user and lib-content.

I aligned the tip to the left of each button because there will always be enough space to the left of the toolbar regardless of screen size.

Here's a video:

tooltips.mov

How to Review

• The tooltips display in the ImageToolbar story in lib-classifier's Storybook.
• The tooltips display on any project that uses the image toolbar (all of them). Here's an example project that shows all available buttons in the toolbar: https://local.zooniverse.org:3000/projects/goplayoutside3/fem-flipbook-viewer/classify/workflow/24066?env=production&demo=true
• On a mobile device...

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

New Feature

• The PR creator has listed user actions to use when testing the new feature
• Unit tests are included for the new feature
• A storybook story has been created or updated
  • Example of SlideTutorial component with docgen comments, and its story

[goplayoutside3]

@seanmiller26 please take a look at the video above for design review of the tooltips.

[coveralls]

coverage: 75.596% (+0.007%) from 75.589%
when pulling 12a00e7 on image-toolbar-tips
into 893bdd3 on master.

[mcbouslog]

LGTM! Tested locally on http://localhost:6006/?path=/story/image-toolbar-image-toolbar--with-single-image-viewer and test project linked. 👍

[seanmiller26]

A few minor things:

For styling, can we use Grommet's Caret? The tip box should still expand to the left of the toolbar.
To better match the behavior in PFE, the interaction should have a delay of 200-500ms.

The copy for each label should match the linked issue #4483

Edit tool: Annotate
Pan tool: Pan
Zoom tools: Zoom In, Zoom Out
Rotate tool: Rotate
Reset tool: Reset View
Invert tool: Invert Colors

[goplayoutside3]

For styling, can we use Grommet's Caret? The tip box should still expand to the left of the toolbar.

Yes, Grommet does not come with a built-in caret, but I created one from an additional html element (similar to Grommet's Tip Storybook example)

To better match the behavior in PFE, the interaction should have a delay of 200-500ms.

👍 Added an animation delay of 250ms and a short fade-in. I also made sure the tip only appears on devices with hover instead of a touch action. By default, Grommet's Tip appears when you touch a button on a touchscreen, but this doesn't work with the classifier UX. For example, we don't want the tip to persist when someone touches the zoom buttons on a phone.

The copy for each label should match the linked issue #4483

👍 Done

Lastly, I added a tiny amount of space (2px) in between each image toolbar button because they're looking crowded, especially on mobile phones or in the smaller layouts for separate frames, etc. I'll make sure to check-in once this PR is deployed.