Tooltips within a collection

Hi, anybody know an easy way to create tool tips within a collection. Each product could have a different grade (see image) and the client wants a tool tip to explain each grade.

Any help would be much appreciated?


Here is my site Read-Only: [LINK](

(how to share your site Read-Only link)

Create an Option field in your Collection, called Grade, with options A and B.
Set the grade on each item.

In your Collection Item on your page, add a div, set it to Flex with Gap column 4px.
Inside of the DIV, place three text elements. Write “Grade” on the first, “A” on the second, “B” on the third. You should see “Grade A B”.
Select A and in the Settings tab add a conditional visibility saying “Visible If Option Field Grade is set to A”.
Select B and do the same with “Visible if Option Field is set to B”

Finally, select the div containing all three text elements, and set a conditional visibility saying “Visible if Option field Grade is set”. This will mask the Grade “tooltip” if the option is not set in a collection item.

Edit: you can actually create only two text elements and bind the second to the value of the Option field, ans spare you the conditional visibility things.

Thanks Vincent, I managed to create it doing a show & hide animation.

I hope you are well?