Bootstro.js

Yay. Finally bootstro now supports Bootstrap 3, after a very very long procrastination. Good news is

Q & A related to the support-bootstrap-3 upgrade

Many thanks to netsstea 's patch . So here comes the demo/documentation. Sorry about this messy page, it's really messy. I'm just too busy :(

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.

Click me! I'm a Demo

Other quick demos:

View javascript at the end of this HTML file to see show to trigger those actions

No escaping : If you don't want to stop the show on clicking the backdrop or Esc, pass stopOnBackdropClick=false or stopOnEsc=false
One element: When there's only one element
No navigation buttons: By passing nextButton='', prevButton='',finishButton=''
Ajax'ed bootstro: The whole bootstro show data can be gotten from ajax request,this way HTML is totally clean. In this example, it gets from bootstro.json
Separate intro data from HTML: Same philosophy as Ajax'ed bootstro above, but the data can be specified in options.items in stead of being fetched from server. The data format is exactly the same as what's returned from ajax data. See this merged Pull Request by @bglick

Known issues

1. The "data-bootstro-title" attribute is overridden by the "title" attribute. This is due to Bootstrap popover's ignoring the title manually passed to it.
2. When some certain steps are missing, Bootstro might act strangely. See #5 and @tsrivishnu's Unmerged pull request for solution

Features

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

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 (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.


Documentation

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.

Heads up! If you specify data-bootstro-step for at least one .bootstro element, then you must provide data-bootstro-step for all .bootstro elements on the page.
Otherwise, just leave out data-bootstro-step attribute altogether, and the popovers will follow their natural order

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'
Options
You can pass an options object to overwrite bootstro's defaults.

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

Fork me on github »