Jonathan Smith

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

  • Alerts Get notified on new alerts
  • Notifications Get notified on new notifications
  • Messages Get notified on new messages
  • Warnings Get notified on new warnings
  • Snap to increments
    Amount ($100 increments):
  • Range
    Price range:
  • Maximum
    Maximum Value:
  • Minimum
    Minimum Value: