Tour

Bootstro.js

Show your users a guided tour of what is what on a page. Especially, for first-time users.

Tour

Bootstro.js

Show your users a guided tour of what is what on a page.

Click me! I'm a Demo

Utilizes Bootstrap Popovers

Works cross-browser, cross-devices . C'mon, it is bootstrap

Utilises Bootstrap Popovers

Bootstro popovers can have variable width

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.

Quick Usage

Add class .bootstro to any element that you'd like to be highlighted

Include bootstro.js & bootstro.css

bootstro.start()

  • Earnings
    $22,500
  • Orders
    4,750
More Sparklines
See all activities
UI Design
12/16
UX Design
8/24
Frontend Development
8/40
Backend Development
24/48
See All
Demo Settings
Fixed Header
Boxed Layout
Collapse Leftbar
Collapse Rightbar
Horizontal Icons
Header Colors
Sidebar Colors
Boxed Layout Options