Add tooltip on hover of color and typography presets

[amitraj2203]

What?

Fix: #61743

Why?

To improve the user experience by displaying the title of each color preset when hovering over them in the site editor's global styles palette just like it happens with the theme colors.

How?

This PR adds tooltip to the color presets in the site editor's global styles palette to display the title of each preset when hovered over.

Testing Instructions

1. Go to site editor > global styles > colors > palette
2. Hover over a preset

Screenshots or screencast

Screen.Recording.2024-06-01.at.8.54.30.PM.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @sahiladit.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: sahiladit.

Co-authored-by: amitraj2203 <amitraj2203@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: bgardner <bgardner@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[scruffian]

Do we need this extra div?

[amitraj2203]

Hi @scruffian, thanks for your review.

I tried it without the div, but it seems that the Tooltip doesn't seem to work then.

[scruffian]

It would be good to do this for typography variations too, though happy for that to be a separate PR

[amitraj2203]

It would be good to do this for typography variations too, though happy for that to be a separate PR

Thanks for suggestion. Addressed this in a separate PR.

[bgardner]

Confirming this works as expected and is a nice touch!

[scruffian]

It's a shame that we need this extra div but I can't find a way round it.

[carolinan]

Can you please include testing instructions and post the test results for users of screen readers and keyboard users.

[carolinan]

Also does this affect the color palette presets in every part of the UI; or only in the Styles sidebar as in the clip?

[amitraj2203]

Hi @scruffian & @carolinan, because of the extra div the focus is not working properly on the palletes. It requires two tab button clicks to focus the palette.
Can we move the Tooltip inside <Variation> that way it doesn't requies extra div and also with this change the tooltip will work on all the three - Styles, palettes and Typography. We can remove it specifically from Styles but still wants your confirmation.

This is how it's working now:

Screen.Recording.2024-06-21.at.1.23.19.PM.mov

And if we move the Tooltip inside <Variation> then this is how it will work:

Screen.Recording.2024-06-21.at.1.29.01.PM.mov

[scruffian]

Can we move the Tooltip inside that way it doesn't requies extra div and also with this change the tooltip will work on all the three - Styles, palettes and Typography. We can remove it specifically from Styles but still wants your confirmation

I had considered this too, I think we should try it.

[amitraj2203]

I had considered this too, I think we should try it.

Updated it. Here's a demo,

Screen.Recording.2024-06-21.at.3.14.57.PM.mov

[amitraj2203]

@scruffian Is anything else required from my side?

Thanks!

[scruffian]

Great, thanks for iterating on this!

[scruffian]

The PHP tests seem stuck on this PR. Since the PR doesn't touch and PHP I'm going to merge it.