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.

[sandy081]

Created the PR implementing this

[alexr00]

@sandy081 not sure if you're using it already, but there is a setting for the hover delay that should probably be used for the hovers you are changing workbench.hover.delay.

[Tyriar]

I think the quick hover was intentional here.

I love the activity bar but not so much the panel ones as it's mostly repeating information and getting in the way, workbench.hover.delay would make sense there?

[sandy081]

@alexr00 Thanks for mentioning about it. I have seen its usage but went without using it for quick hover as @Tyriar mentioned.

Re using hover delay in panel, went with consistency in activity bar and panels.

[sana-ajani]

Thoughts on using this to potentially rename the gear icon from "Manage" to "Settings" or "Preferences"? This is generally more common in apps like Edge, Slack, and Chrome as well.

[sandy081]

There is an ask to make this as an experiment and check and measure if this improves the experience. Any thoughts about making this default or change it to an experiment before making it default?

[sana-ajani]

Since we saw many users in the getting started user studies often hovering icons and clicking through menus, I think it could be useful to roll this out as an experiment to measure how much more engagement with the activity bar we see, and if it improves the new user experience specifically.

[Tyriar]

Re using hover delay in panel, went with consistency in activity bar and panels.

Imo we should consistently show the hover near instantly for textless actions, and consistently use the workbench delay for actions with text.

[bpasero]

+1 on only showing the hover on a delay that is configurable.

[eamodio]

Imo we should consistently show the hover near instantly for textless actions, and consistently use the workbench delay for actions with text.

I mostly agree though I might make an exception for the panel headers because of the shortcut key visibility.

Makes me also want this for all actionbar icons too.

[eamodio]

I like the instant hover.

[sandy081]

Reopening it for discussion as it seems some of us does not like it

[jrieken]

For me there are two problems with the custom hover

• it shows to quickly
• it always shows at the same position, doesn't respect my relative mouse position, and that makes it very alien

[bpasero]

From #121354:

• it should not use the custom hover unless there is a good reason (e.g. do we show markdown in there?)
• it should have a configurable color so that I have a way to disable it if I don't like it

The native hover seems to work well so far:

[eamodio]

I really like the new hovers, though I would recommend a very short delay -- just to avoid them showing up while the mouse is moving, but still very quickly. Similar to Slack's workspace bar.

I also really like that those hover go along with the theme now. Are we using a new theme color for the hover feedback? As I would like to theme that to look better.

[eamodio]

Also it would be great if we could render the shortcut keys better now, again maybe similar to Slack's

[eamodio]

It seems like there is some unwanted flicker on the activity bar

[sandy081]

it shows to quickly

Will introduce or reuse the delay setting.

it always shows at the same position, doesn't respect my relative mouse position, and that makes it very alien

Right. We can make them position like native hovers. Personally I liked how it is currently and is also suggested as req. I will collect more feedback before getting to this.

it should not use the custom hover unless there is a good reason

Reason is mentioned in the summary of the issue - just mentioning it again here

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.

it should have a configurable color so that I have a way to disable it if I don't like it

I do not know if hovers can be theme-able - @Tyriar ?

Also it would be great if we could render the shortcut keys better now, again maybe similar to Slack's

Good suggestion - will take a look

It seems like there is some unwanted flicker on the activity bar

Right - will check it out and fix

[jrieken]

Right. We can make them position like native hovers. Personally I liked how it is currently and is also suggested as req. I will collect more feedback before getting to this.

Now that someone has mentioned slack: I think they do better job because their "button-hover" is so different from the native hover that you don't get the confused feeling that the "native, not-native hover" is wrong.

[sandy081]

Introduced slight delay for showing custom hovers on activity bar/panel.

[miguelsolorio]

Trying this out after being gone for a week, I definitely like the hover feedback. However, it seems like there are a few things that could be improved for all hovers and not specific to the activity bar:

• The hover text is really large, especially when there's extra text in the title
  
• It can be hard to tell where the hover is coming from when there is no "arrow" that is common in tooltips like
  
  

Since this hover is inheriting the default styles from the editor hover, I'd like to propose a different styling for non-editor hovers (we can also move this feedback into a separate issue):

[Tyriar]

A similar "flicker" also happens in the explorer.

Now that someone has mentioned slack: I think they do better job because their "button-hover" is so different from the native hover that you don't get the confused feeling that the "native, not-native hover" is wrong.

I do not know if hovers can be theme-able

Not yet, though I think we should have 2 different styles, maybe with a little arrow and/or the fade in animation to differentiate it. Then center the hover and for the panel put them on the top like this:

[sandy081]

As requested by @digitarald and @sana-ajani I moved custom hovers behind an experimental flag. So they are off by default and you can enable it using the setting workbench.experimental.useCustomHover.

I liked the suggestions provided by @misolori and @Tyriar - will try to implement that in this milestone.

[digitarald]

@sandy081 the animation in #118077 (comment) (which also applies to native tooltips) does not fade in and out while hovering between aligned buttons:

Would it be possible to not drop this affordance with custom tooltips, as we see a lot of users hovering across toolbars to quickly scan for specific features?

[pixieaka]

@sandy081 I have noticed this blue line in the left when mouse down only in file icon and this doesn't shows in the other icons. (0310f02)

[sandy081]

@pixieaka Can you please file a separate issue for it?

[miguelsolorio]

@pixieaka posting here as well, but the blue line is the focus state in the activity bar. If you tab into the activity bar you'll see the same thing so this is by design.

[sandy081]

Did some improvements based on received feedback

[sandy081]

Closing this issue and will track any feedback in separate issues.