Ramon Pinho's Helper Component Site

Welcome to Helper Component Site!
But what the heck is helper component? Or what I'm calling helper component?
Basically what I wanted is an easy UI-web-component that I could simply create a floating div with a html template content like this:

    var _tutorial = Tutorial();

    _tutorial.AddLesson("lesson1", "menuHome", "This is where you are now, home, right?", "");
    _tutorial.AddLesson("lesson1", "menuIntro", "This is where you find info about the component later.", "");
    _tutorial.AddLesson("lesson1", "menuAbout", "This is where you'll find out more about me.", "");
    
    _tutorial.StartLesson("lesson1");

And magically the component would start a "Tutorial" pointing helpful information about how to use my web-application, what to be found in each menu and how to get started.
I've seen that a lot in games, but rarelly other kinds of application. Maybe due to the complexity to create such an outstanding user interaction, or just maybe there is lack of components to help create applications with such nice capabilities.
The component is solely based on javascript supported by css. That means it does not depends on anything else (just add the helper.css and hlper.js and it is good to go).
That also means it should work on any web-page, since it directly manipulate DOM creating and managing its DOM objects dynamically.
It make uses of no global variable.

OK Persist if user have already done the tutorial or lessons.
OK Play only the new lessons.
OK Allow user to disable tutorial or start over.

TODO:
+ Allow html content to be added for a more beautifull formatted help / Add html div support as content (?)
+ Add play sound capabilities.
+ Add keyboard short cuts.
+ Add setting so the develper can choose the preferable side which the dialog should pop up (rigth, left, up or down).
+ Add css support.
+ Add animation (CSS only?)
+ Draw a line linking the html refered element and the helper balloon (should i call it balloon?)(use SVG?)(hmmm...).

+ Add time capabilities (I mean, go to next automatically over time) / Add setting to time interval by lesson. + Add setting to allow developer remove back button? Known Issues:
+ If screen has scroll, the current way of getting the refered html element using its boundaries and setting the balloon as absolute position is moving the balloon away... Since mobile will always have the scroll here, cause there is a lot of text, the balloon are misplaced over ahead the visible area.

Controls

Enable Tutorial