

Bootstrap Tour: Quick and easy way to build your product tours - drewda
http://pushly.github.com/bootstrap-tour/

======
dools
Interesting! This is really similar to Guiders.js from Optimizely. We've just
done some hacking with Guiders for our latest product demo/lead gen landing
page for Decal CMS[1] but this seems as though it might be a bit more flexible
since it's based on Bootstrap popovers.

[1] <http://30s-demo.mockups.decalcms.com/>

------
crcsmnky
I'm wondering (aloud, I suppose) if it would make sense to support keyboard
navigation. From a lazy perspective it would be nice not to have to mouse to
each popover and hit "next" but then you might lose the "tour" feeling with
people just moving on indiscriminately. Any folks who actually study/do UX
care to comment?

~~~
c_t_montgomery
Don't study/do either of those, but was thinking the same thing. Keyboard nav
would be great.

~~~
tagawa
Agree - this is also needed for accessibility reasons. Either something like
Spacebar for next, or Tab/arrow keys.

~~~
sorich87
We will definitely add that.

------
ThomPete
Great idea, but you need to spend some more time on the implementation.
Especially the box was at least in my browser kind of a mess. You need clearer
call to actions for your next.

Also I found it hard to orientate myself because of the stacatto moves between
the steps. Perhaps some sort of animation with some easing would make it
easier to follow.

~~~
sorich87
That's some great feedback! Thanks.

------
sbashyal
This is awesome. I was experimenting with Bootstrap Popovers yesterday to
guide new users. Your implementation is much more polished. Will definitely
give this a try.

------
ericcholis
For those that are interested, there is something similar for Zurb's
Foundation framework:

[http://www.zurb.com/playground/jquery-joyride-feature-
tour-p...](http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin)

------
mrchess
Awesome. I was just about this make this yesterday when I found myself
customize optimizley/guiders to work with Bootstrap skins :D

------
jonstjohn
I just built something very similar on top of bootstrap for my company two
weeks ago. Even some of the methods and naming are the same! Oh well, we
needed something slightly more customized and it only took a day or so to
write.

------
iamdann
This is great. Super easy to implement, too.

------
brentm
yea this is cool, I was just making a guide with these same popovers on
Thursday....Guiders.js looks cool too.

------
jacktang
It looks great! and I can't restart tour once more. Keep watching the project
:)

------
markyc
great work!

1 q: no "previous" button?

~~~
nimblegorilla
This framework is just what I've been needing. I'm working on a big tutorial
that just used popup windows and relied on the user to find what they needed
on the page.

I'm going to start using this and if the OP doesn't add a previous button I'll
probably submit something myself.

~~~
sorich87
I am the OP. A pull request would be very welcome!

------
cow
this is awesome

------
dr42
This is a very handy piece of js. thank you

------
zalew
Great, I could use something like that in the current project. Oh, twitter
bootstrap.. too bad.

~~~
sorich87
You can just use the popover plugin from Bootstrap. You don't have to use the
full framework.

~~~
zalew
oh, if so, that's cool, tx. OP should tell about it on the page.

