Interactive Function Reference Tooltip

[yugalkaushik]

Increasing Access

This feature increases access to the p5.js Web Editor by making it easier for beginners and educators to learn and use p5.js functions without leaving the editor. By providing instant tooltips with function descriptions, syntax, and example snippets, it serves as a quick reference, especially since parameters for functions like ellipse() or rect() are often hard to remember. This reduces the learning curve for new coders, particularly in classroom or workshop settings, and supports diverse learners (e.g., students, artists) with immediate, context-aware help. A toggle to disable tooltips ensures experienced users can opt out, maintaining accessibility for all skill levels.

Feature request details

I propose adding an Interactive Function Reference tooltip to the p5.js Web Editor. When a user hovers over a p5.js function (e.g. circle()), a tooltip appears with:

• A brief description of the function.

• Its syntax and parameters (e.g. circle(50, 50, 25)).

• A “Try Example” button to insert a working code snippet (e.g., ellipse(50, 50, 80, 80);). This acts as a quick reference for users, especially beginners, who struggle to recall parameters for each function (e.g., the order of x, y, w, h in rect()). It helps users learn and experiment without needing external documentation. This would be especially useful for new coders in workshops, self-paced learners, or anyone needing a quick reminder of function parameters.

[raclim]

Thanks for suggesting this! I think it could be helpful to have an idea of what this might look like and where the placement would be, particularly for the "Try Example" button. Feel free to add an image with a brief sketch or a screenshot/link of a quick prototype or draft!

[yugalkaushik]

I'm thinking of something like this: for experienced coders, they can toggle the tooltip off in the settings so it doesn’t interfere with their workflow. The tooltip should appear for a few seconds after hovering over a function, giving users enough time to click the 'Try Example' button.

[yugalkaushik]

@raclim where can I find the API to fetch reference functions?