YJL

intro.js is a library for making an introduction on a website with step-by-step guide. To be honest, I didn’t even know there was such library exists until now, and it’s not the only one, bootstro.js is another library but with Twitter’s Bootstrap tie.

This button will give you a tiny tour of this blog: Start

It only requires one JavaScript and one CSS file, fairly small. According to its website, they are 6 KB in total. It also supports keyboard to navigate between steps.

The introduction data is set in element’s attributes, data-intro for the description and data-step for the step number. You can also use data-position to adjust where the bubble shows.

Calling the startup function and that’s basically all you need to do for setting up a quick introduction tour for visitors.

You may have noticed that there is some layout issue with the current code in this blog tour, the step description somehow is shown within much smaller space. I am sure it would be fixed soon. Within only a week, this project has received more than 60 issue reports and it was first released at that time, 6 days to be precise. So, intro.js is relatively new, some bugs are to be expected.