search

commons-stack / c-sim-front-end

Frontend for Commons Simulator
https://sim.commonsstack.org/
6 stars 5 forks source link

Add tool tips to so that user can click for more info #137

Closed laurenluz closed 3 years ago

laurenluz commented 3 years ago

Going through the simulator with @Danibelle and noticing some issues...

Suggesting to add a hovering hand/tool tips so when the user mouses over key words, they can click to open the "Help" popup.

For example, when mousing over "Funding Pool" or "RxC Reserve" on the hatch tribute page (image 1), could have the hovering hand and a popup that says "click for more info" leading to our "Help" popup (image 2)

image.png

image.png

laurenluz commented 3 years ago

would love your feedback @markoprljic ... maybe this is a nice-to-have

markoprljic commented 3 years ago

@laurenluz This is a good idea. We already planned tooltips in design for certain areas in UI. I wouldn't make them that generic but instead, provide an explanation of what the element on the screen stands for + link to Help for more info.

We can make a list of all tooltips for each level including the text (must be really short). Would you be up to do the list for that?

MerlinEgalite commented 3 years ago

Hey! Will you put here the locations and designs for tooltips?

markoprljic commented 3 years ago

I know where they are in Figma, but they should also be coded and available somewhere.

Image 2021-02-11 at 4 05 46 pm
MerlinEgalite commented 3 years ago

Well! can you send the link to figma design please? And are they ready to be implemented? or some reflections around what to explain and tooltip contents are still need before implementing them on the frontend?

markoprljic commented 3 years ago

https://www.figma.com/file/cuFTOOajO4aouz4SLnIINz/Commons-Simulator?node-id=557%3A3297

Anything else? :)

laurenluz commented 3 years ago

@MerlinEgalite I'm going to put the tooltips as comments in the figma today and will ping you when they're ready to be implemented on the frontend

laurenluz commented 3 years ago

Ok so I added most tooltip content as comments in the figma, here:

https://www.figma.com/file/cuFTOOajO4aouz4SLnIINz/Commons-Simulator?node-id=557%3A3297

Everywhere it says click for more info would be great if the user could click that and it would send them to our "more info" popup for that page.

Also, for the results page, I would like to add tooltips on each of the results boxes at the top with content as follows:

image

(didn't add the last part to the figma because our version now looks really different that what we have in the figma)