Interactive Function Reference Tooltip

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.

The issue does not name files, tests, or an entry point. First map the Web Editor's editor UI and its existing p5.js reference or documentation integration, then define how function detection, tooltip content, example insertion, and the opt-out toggle should work before implementing and testing the complete interaction.