bootstro.set_bootstrap_version(2);before calling bootstro.start(). Please have a look at this bootstrap 2 page demo It also uses the latest bootstro.js
Bootstrap-intro.js: Show your users a guided tour of what is what on a page.
Especially, for first-time users.
Use it with Bootstrap.
Works cross-browser, cross-devices . C'mon, it is bootstrap
Utilises Bootstrap Popovers
Bootstro popovers can have variable width, even though Bootstrap 2.3 popovers does not (yet) (issue #1730 & solution)
Small (3.0K minified JS & 0.5K minified CSS)
No collision. Everything safely namespaced to bootstro. All events unbinded when the intro stops
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
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()
As part of building a sortof open KhanAcademy clone using our home grown SandPHP framework , I developed a working but spaghetti version (gist)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.
Bootstro requires bootstrap & bootstrap popover
Add class .bootstro to any element that you'd like to be highlighted
Specify the highlighted (intro'ed) element's popover with data-bootstro-* prefix, where * can be one of the bootstrap popover's options.
At the bare minium, you should probably provide data-bootstro-title and data-bootstro-content.
data-bootstro-title : Title of the popover [optional, defaulted to '']
data-bootstro-content : Content of the popover [optional, defaulted to '']
data-bootstro-placement : Placement position [top,bottom,left,right] of the popover [optional, defaulted to 'top']
data-bootstro-width : If you like to bypass bootstrap's default popover un-settable width, specify it like data-bootstro-width='500px'. Don't forget the 'px' suffix [optional]
data-bootstro-nextButtonText : Next button HTML text. For example, in stead of "Next", you can specify
data-bootstro-html : true|false . Whether or not the popover content will be displayed as HTML or text. Refer to popovers html option.
data-bootstro-step : The stack index of the intro'ed popover.
Include bootstro.js (after bootstrap.js) & bootstro.css. There are minified versions too
Call
$(document).ready(function(){
bootstro.start(selector, options);
});
where selector is any jquery selector, defaulted to '.bootstro'
nextButton: HTML for the next button. It must include a class 'bootstro-next-btn'. defaulted to
< button class="btn btn-primary btn-mini bootstro-next-btn">Next »< /button>Pass '' if you don't want the buttons (and just using nav keys)
nextButtonText: If you don't want to specify the whole length button text for nextButton, this is a simplified version. You just need to specify the test "Next »" and the final button will be wrapped into
< button class="btn btn-primary btn-mini bootstro-next-btn">Next »< /button>Note that, nextButton will override nextButtonText.
prevButton: HTML for the prev button. It must include a class 'bootstro-prev-btn'. defaulted to
< button class="btn btn-primary btn-mini bootstro-prev-btn">Next «< /button>Pass '' if you don't want the buttons (and just using nav keys)
prevButtonText: See nextButtonText
finishButton: HTML for the prev button. It must include a class 'bootstro-finish-btn'. defaulted to
< button class="btn btn-mini btn-success bootstro-finish-btn">< i class="icon-ok" >< /i> Ok I got it, get back to the site< /button>Pass '' if you don't want the buttons (and just using nav keys)
prevButtonText: See nextButtonText
stopOnBackdropClick: true|false. If true, show will stop onclick on the backdrop. Defaulted to true. Try stopOnBackdropClick=false here
stopOnEsc: true|false. If true, show will stop onclick on Esc keypress. Defaulted to true. Try stopOnEsc=false here
margin: How far the intro'ed element should stay away from the top. This is to avoid some elements being partically hidden under Twitter bootstrap's top nav bar (See issue #2)
onComplete: Callback function when show's reached the final "slide". Param {idx : activeIndex}
onExit: Callback function when show's destroyed and screen returns to normal.
Function Param {idx : activeIndex}, where activeIndex is the
index of the element when the show stopped
onStep: Callback function when show's destroyed and screen returns to normal.
Function params: {idx: activeIndex, direction: [next|prev]}, where activeIndex is the index of active element, direction
is the direction of the show when stepping to this element, which can be 'next' or 'prev'
To extend bootstro, you can just assign bootstro.yourfunction = {}. Bootstro's using the prototype written in jqueryenterprise.com's blog
bootstro's public methods
bootstro.start(selector, options) : Init & Start the popover show
bootstro.go_to(i) : Show the popover at the stack index i
bootstro.stop() : Stop slide show
bootstro.next() : Go to next popover
bootstro.prev() : Go to previous popover
bootstro.bind() : Initialize & bind handlers for keypress, click on the nav events
bootstro.unbind() : Unbind all the initialized bootstro handlers
With that, probably Bootstro can be easily customized to show all the popovers at once, not just a slideshow