This overlay technique works beautifully for guided, interactive tutorials.
We've had great success using it in our tutorials to get users quickly up to speed with our product.
It works better than the similar "show bubble beside dom element" technique[1] for a few reasons:
1) With bubbles, you need real estate next to the element to display the help text. This often doesn't exist, especially e.g. inside a frame in a Firefox sidebar. By fading everything else out, it is easy to have the help text in a different location.
2) Bubbles are typically not as high contrast as the overlay, so they are a weaker mechanism for drawing attention.
3) With the overlay technique, you can highlight multiple elements at once, which is impossible with bubbles. This is critical when you need to explain how two things relate to each other, and something that seems to be missing in this library.
You can check out how we did our interactive tutorials at http://www.parsehub.com (they're within the extension).
Yes, intro.js is a great lib, I know that, but for me has an important missing feature; you can't interact with the focused element, I mean, you don't have any mouse event or similar... this is the only bad thing I think.
We've had great success using it in our tutorials to get users quickly up to speed with our product.
It works better than the similar "show bubble beside dom element" technique[1] for a few reasons:
1) With bubbles, you need real estate next to the element to display the help text. This often doesn't exist, especially e.g. inside a frame in a Firefox sidebar. By fading everything else out, it is easy to have the help text in a different location.
2) Bubbles are typically not as high contrast as the overlay, so they are a weaker mechanism for drawing attention.
3) With the overlay technique, you can highlight multiple elements at once, which is impossible with bubbles. This is critical when you need to explain how two things relate to each other, and something that seems to be missing in this library.
You can check out how we did our interactive tutorials at http://www.parsehub.com (they're within the extension).
[1] http://css-tricks.com/bubble-point-tooltips-with-css3-jquery...