The visualization code I’m writing using Processing.js needs a tooltip to display some information depending on where your mouse is in the canvas. Although there are many tooltip options for webpage elements, I didn’t find any that I could easily use with Processing.js to generate tooltips dependent on the mouse position in the canvas. After a few frustrating attempts with various libraries I finally just took this rounded corners demo by F1LT3R. and hacked together a ToolTip class of my own that works with Processing.js. I think it’s pretty nice for a quick hack.

The tooltip has variable transparency, detects in and out of canvas state, and adjusts itself when the tooltip approaches a canvas edge. It has a clipping mode for static canvas images and a non-clipping mode for use with canvas animations. Although I haven’t tested it, this library should work just as well with the java-based Processing. A demo of the tooltip is below, along with a nice HTML5 background animation that was also written in Processing. Note: The Chrome browser shows artifacts with this for some reason. It works fine in Safari and Firefox.

Mouse over the canvas to make the tooltip appear. Click on the canvas to give it focus. Press ‘r’ to randomize background animation. Press ‘a’ to cycle through alpha levels. Press ‘c’ to randomize tip color.

You can download ToolTip.pde and test code from github:gist. ToolTip.pde has instructions in it’s header. The use of this tooltip isn’t limited to Processing sketches. Since processing.js pde files are converted to pure javascript before execution, you can also use this tooltip, as well as any other Processing.js library, in javascript code that writes to the canvas. The Processing QuickStart for JavaScript Developers gives examples of how to use Processing.js libraries with pure javascript and libraries like jQuery (which, incidentally, was written by the same person who created Processing.js).