Create a tooltip for the OE Label HTML code

[dizzysunset]

After a product owner submits the OEL transparency disclosure, they receive the machine-readable JSON file along with an HTML code with the visual representation of the OE label. When they paste the code on their website, the label is displayed as a set of icons, without displaying textual information of the icons.

The tasks consists in creating a tooltip in HTML (a contextual text bubble that displays a description for an element that appears on pointer hover or keyboard focus - https://developer.mozilla.org/) to be added to the visual representation of the label on a website.

You will be provided with the descriptions of all icons.

[Nazehs]

I will love to pick this up can I have further Content/Context for this please

[nikiluk]

Hi @Nazehs here's where we can start IMO

1. we have the current and future schema, where we can actually find the descriptions - we can add them there. The tooltips for the field itself
2. we have the current display of the label in a very simple way, using the HTML code which embeds via iframe. I wonder, to which extent the tooltips will be visible in the parent HTML file. Could you have a look at how it works now and what could be done?

For example, see the label inserted on https://hellobio.me/ on the footer of the website.

And the disclosure published on https://hellobio.me/oetp.json

[nikiluk]

This folder contains the schema that covers the disclosure
https://github.com/OpenEthicsAI/OETP/tree/main/schema

Also on this page it's visualized
https://openethics.ai/oetp/