Add Tooltip for Remove from Collection List Button

[raclim]

Background

In a Collection's sketch list view, each sketch has a dedicated row with an "X" button to remove it from the collection. However, the purpose of this button might not be clear to some users.

As a short-term improvement, we would like to add a tooltip with the text "Remove from Collection", which can immediately communicate the button's purpose.

Suggestions to Start

• Identify the component responsible for rendering the Collection view pictured above, and add a tooltip that appears on hover and keyboard focus.
• Examine how tooltips are integrated in other areas of the p5.js editor. One current implementation can be found in the dropdown menu pictured below.

[Nixxx19]

Hi @raclim, I would like to work on this! I'll ensure the tooltip implementation follows WCAG standards, specifically ensuring it is perceivable on hover and keyboard focus, and is screen-reader friendly (using aria-describedby).

[dpoppe7]

Hello @raclim, I would be happy to work on this issue since it is a good first issue!

[Anshumancanrock]

Hi @raclim ,I would be happy to work on this issue and can start right away. Could you please assign this to me ? Thanks !

[Irfan762]

Hi @raclim ,
I’m familiar with the codebase and have already merged a PR for another issue. Could you please assign this issue to me?

[Irfan762]

Hi @ksen0 ,
I’ve already merged a PR for another issue and am comfortable with the codebase. Can you assign this issue to me?

[SinhaS12]

hi @raclim can you please elaborate this issue so that i can work on this

[pranjal270]

Hi @raclim 👋 I've set up the web editor locally and would love to tackle this as my first issue. My plan is to wrap the remove button in CollectionItemRow.jsx with the existing <Tooltip> component from client/common/Tooltip.tsx . I'll also add a translated string for 'Remove from Collection' to the en-US locale file to ensure proper internationalization.

Could you assign this issue to me? I can have a PR ready for review today!