Use custom hover for activity bar tooltip

[miguelsolorio]

I think one of the areas that could benefit from quicker tooltips/custom hovers is the activity bar as it is a frequently used area and the native tooltip takes too long to load. We've seen this in user studies where new users are not sure what these items are and don't click on them.

cc @bpasero @alexr00

[digitarald]

Love the direction. I could not if browser tooltips had UX revisions; and most web-based apps I use replaced tooltips with custom tooltips to make them feel well integrated.

It should probably hook into the theming colors; which I think your mockup considers. The result will

To make it feel snappier, a common pattern that can be found in the wild is to not fade the tooltip in/out when moving between buttons that are aligned next to each other (horizontal & vertical). Figma as an example (screen recording didn't capture the right mouse position):

Since they will be HTML, it's an opportunity to think about a multi-line layout that breaks out the shortcut on a new line. For prominent buttons, it could also leave room for an additional one-liner that explains the feature.

[miguelsolorio]

Right, I think we've discussed this approach as Chrome does this on tabs as well, the first tooltip fades in and then as you move around the rest are instantly shown. I think @alexr00 looked into this?

[sana-ajani]

This was a more agreed upon proposal when last brought up at a UX sync, instead of having labels under activity bar icons: #104452 (comment)

[digitarald]

The first tooltip fades in and then as you move around the rest are instantly shown.

Right, Chrome tab hover cards even transitioning from one to the next tab.

There are some animation best practices out there about this, but not sure if this one is too distracting, delightful, or actually a cognitive benefit. I personally am a fan of delightful animations that encourage exploration and don't get in the way of productivity.

[bpasero]

Right, I think we've discussed this approach as Chrome does this on tabs as well, the first tooltip fades in and then as you move around the rest are instantly shown.

Isn't that pretty much standard hover behaviour even with native ones? When the hover appears and I move my mouse to another location with a hover, the hover should appear instantly and not require another delay. The delay is only useful to not bring up the hover too quickly when the user moves the mouse.

[miguelsolorio]

@bpasero yes that is standard native behavior but our custom hover does not behave this way.

[miguelsolorio]

@sandy081 thoughts on moving this to April?

[digitarald]

I am ready to help run this as experiment to learn how improving UI affordance enhances the experience for new users.

[sandy081]

Sure, will look at this in April.