Bootstrap Tour: Quick and easy way to build your product tours | Hacker News Reader

Bootstrap Tour: Quick and easy way to build your product tours

pushly.github.com

144 pointsdrewda23 comments

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/

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?

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

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

We will definitely add that.

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.

That's some great feedback! Thanks.

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.

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

http://www.zurb.com/playground/jquery-joyride-feature-tour-p...

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

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.

This is great. Super easy to implement, too.

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

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

great work!

1 q: no "previous" button?

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.

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

Well, we didn't think about that when we wrote the library for use in our app. :) Now that you mention it, I think it would be a great addition.

this is awesome

This is a very handy piece of js. thank you

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

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

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

Reply on news.ycombinator.com