Change hover behavior for profile menu item

[sjnbham]

It would be great to change the behavior from hover to click for the profile menu to expand on the top admin toolbar. When moving a mouse to the top right of the screen to click the Update button for a post or page, more than half the time I accidentally hover over the profile link which then overlaps the update button and then I click. This results in a dialogue box being displayed asking if I want to leave the site and changes may not be saved. This seems like a minor annoyance, but I’ll bet there are many others out there that experience the same thing. Also, the profile/logout link is so rarely used by our content editors, the difference between two clicks vs. hover and click isn’t a big deal.

Another way to address this could be to provide an option to universally have menus expand and collapse only on click vs. hover in the admin interface. It may also have the side affect of making it a bit more accessible for those with poor motor skills.

[lonnietapia]

Tagging "needs design" so we can see option 1 before implementing anything.

[lonnietapia]

@sjnbham The second option could also be a separate ticket. Would you consider opening one just for that?

[sjnbham]

@lonnietapia - created separate ticket for all admin toolbar links: https://core.trac.wordpress.org/ticket/48494#ticket

Thanks

[dinhtungdu]

IMO, we can fix this issue by increasing the interval of hoverIntent which is 100 currently.
Also, changing the default behavior from hover to click can be very dangerous because Toolbar has been using hover for years, changing it means educating end-users again.

P.S: admin-bar.js is being rewritten using vanilla JS at #47069

[sjnbham]

Thanks for the suggestion @dinhtungdu

I tried increasing the hoverintent setting. While it does help with the accidental mouseovers, it creates a different problem. When someone mouses over it, the delay in having the submenu open will likely lead to people trying to click on the parent link anyway.

I understand the hover has been the convention for a long time. The click is more accessible all around though and users would adjust quickly as click to open menus is a common interface convention.

​https://www.liquidlight.co.uk/blog/navigation-drop-downs-should-they-be-hover-or-click/