enyo / opentip

Opentip is an open source javascript tooltip based on the protoype framework.
http://www.opentip.org
1.25k stars 401 forks source link

Integrating with Canvas and OpenTip #123

Open vladilin opened 9 years ago

vladilin commented 9 years ago

Hello there,

I love OprnTip and was wondering if you could help steer me in the right direction. I am rather good with HTML and with your Docs I had no problem instituting OpenTip in HTML but I am a complete NEWB at canvas.

I have created a couple of boxes in canvas using something like this:

context.beginPath(); context.rect(1,0,100,75); context.fillStyle = 'red'; context.fill(); context.lineWidth = 1; context.strokeStyle = 'black'; context.stroke(); context.fillStyle = 'black'; context.font="15px Arial"; context.fillText("SF150",32,43); context.closePath();

context.beginPath(); context.rect(1, 75,100,75); context.fillStyle = 'yellow'; context.fill(); context.lineWidth = 1; context.strokeStyle = 'black'; context.stroke(); context.fillStyle = 'black'; context.font="15px Arial"; context.fillText("SF148",32,119); context.closePath();

I wanted to add a on hover tool tip to each box that would take information from each rendering. Using my example above:

context.rect(1, 75,100,75); context.fillStyle = 'yellow'; context.fill(); context.lineWidth = 1; context.strokeStyle = 'black'; context.stroke(); context.fillStyle = 'black'; context.font="15px Arial"; context.fillText("SF148",32,119);

context.opentip("Optional content", "Optional title",'otherinfo')

I am just not good enough in code and js to make this work. If could you put me on the right track I'd really appreciate it.

Thank you, Vlad