I've built an analytical data visualization engine for Canvas and have been requested to add tooltip-like hover over data elements to display detailed metrics for the data point under the cursor.

For simple bar & Gaant charts, tree graphs and node maps with simple square areas or specific points of interest, I was able to implement this by overlaying absolutely-positioned DIVs with :hover attributes, but there are some more complicated visualizations such as pie charts and a traffic flow rendering which has hundreds of separate areas defined by bezeir curves.

Is is possible to somehow attach an overlay, or trigger an event when the user mouses over a specific closed path?

Each area for which hover needs to be specified is defined as follows:

context.beginPath();

context.moveTo(segmentRight, prevTop);

context.bezierCurveTo(segmentRight, prevTop, segmentLeft, thisTop, segmentLeft, thisTop);

context.lineTo(segmentLeft, thisBottom);

context.bezierCurveTo(segmentLeft, thisBottom, segmentRight, prevBottom, segmentRight, prevBottom);

/*

 * ...define additional segments...

 */

// <dream> Ideally I would like to attach to events on each path:

context.setMouseover(function(){/*Show hover content*/});

// </dream>

context.closePath();

Binding to an object like this is almost trivial to implement in Flash or Silverlight, since but the current Canvas implementation has the advantage of directly using our existing Javascript API and integrating with other Ajax elements, we are hoping to avoid putting Flash into the mix.

Any ideas?