Tour
Bootstro.js
Show your users a guided tour of what is what on a page. Especially, for first-time users. Use it with Bootstrap.
Features
Works cross-browser, cross-devices . C'mon, it is bootstrap
Utilises Bootstrap Popovers
Small (3.0K minified JS & 0.5K minified CSS)
No collision. Everything safely namespaced to bootstro. All events unbinded when the intro stops
More features
Any element anywhere on the page can be intro'ed: popovers are automatically scrolled to so they always get focused
Easily customizable: Bootstro provides various public methods so you can control as you like bootstro.start(), bootstro.next(), bootstro.prev()...
Keyboard shortcuts: Works with Esc, → ↓, ← ↑ shortcuts too
Show can be alternativly loaded via ajax: This way the page HTML can be kept clean, and server also can decide which elements to show more easily,or translate the show more easily. Try it
Quick Usage
Bootstro requires bootstrap & bootstrap popover
Add class .bootstro to any element that you'd like to be highlighted
Include bootstro.js & bootstro.css
bootstro.start()
Why?
As part of building a sortof open KhanAcademy clone using our home grown SandPHP framework, I developed a working but spaghetti version of Bootstro.js a few weeks ago (I called it live_onpage_help() then). But after seeing HN's excitement on intro.js 2 days ago, I thought Bootstrap lovers might love Bootstro.js as well.
So I decided to spend the weekend customizing & advancing my work into a separate reusable proper tiny utility.
Bootstrap-tour.js
This tour plugin based on Bootstrap, and using as default Bootstrap Popover. Also this plugin can be used without Bootstrap.
Heading h4
In quis tincidunt sem. Vestibulum risus quam, bibendum et eleifend eget, finibus vel felis. Nam viverra est neque. Suspendisse eget mauris non quam venenatis porta non a eros. Donec posuere, lorem ut commodo elementum, lectus erat maximus massa, vitae vehicula arcu lectus ac dolor.
Heading h4
Vivamus ac rhoncus felis. Phasellus tincidunt consectetur dapibus. Nulla at tortor sed lectus lacinia vehicula. Phasellus non ex quis purus facilisis viverra et vitae ex. Ut tempor condimentum blandit.