I looked at this component when we wanted to make a "getting started" tour for Aha! (http://www.aha.io). However, I didn't like the idea of a linear tour where you must complete one step to get to the next. Instead I created https://github.com/aha-app/getting_started_balloons (for Rails 3 and JQuery) which allows multiple balloons to be shown at once.
The slightly novel aspect is the use of SVG to draw the arrow to the element you want to highlight. This allows flexibility in positioning the balloon so that it doesn't obscure some other interesting aspect of the screen.
Comments
I looked at this component when we wanted to make a "getting started" tour for Aha! (http://www.aha.io). However, I didn't like the idea of a linear tour where you must complete one step to get to the next. Instead I created https://github.com/aha-app/getting_started_balloons (for Rails 3 and JQuery) which allows multiple balloons to be shown at once.
The slightly novel aspect is the use of SVG to draw the arrow to the element you want to highlight. This allows flexibility in positioning the balloon so that it doesn't obscure some other interesting aspect of the screen.