6 ms·

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

144 points by drewda 14y ago

dr42 14y ago
This is a very handy piece of js. thank you
iamdann 14y ago
This is great. Super easy to implement, too.
mrchess 14y ago
Awesome. I was just about this make this yesterday when I found myself customize optimizley/guiders to work with Bootstrap skins :D
markyc 14y ago
great work! 1 q: no "previous" button?
- nimblegorilla 14y ago
  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 14y ago
    I am the OP. A pull request would be very welcome!
- sorich87 14y ago
  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.
sbashyal 14y ago
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.
crcsmnky 14y ago
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 14y ago
  Don't study/do either of those, but was thinking the same thing. Keyboard nav would be great.
  - tagawa 14y ago
    Agree - this is also needed for accessibility reasons. Either something like Spacebar for next, or Tab/arrow keys.
    - sorich87 14y ago
      We will definitely add that.
zalew 14y ago
Great, I could use something like that in the current project. Oh, twitter bootstrap.. too bad.
- sorich87 14y ago
  You can just use the popover plugin from Bootstrap. You don't have to use the full framework.
  - zalew 14y ago
    oh, if so, that's cool, tx. OP should tell about it on the page.
dools 14y ago
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/ http://30s-demo.mockups.decalcms.com/
brentm 14y ago
yea this is cool, I was just making a guide with these same popovers on Thursday....Guiders.js looks cool too.
cow 14y ago
this is awesome
ericcholis 14y ago
For those that are interested, there is something similar for Zurb's Foundation framework: http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin http://www.zurb.com/playground/jquery-joyride-feature-tour-p...
jacktang 14y ago
It looks great! and I can't restart tour once more. Keep watching the project :)
jonstjohn 14y ago
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.
ThomPete 14y ago
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 14y ago
  That's some great feedback! Thanks.

144 points by drewda 14y ago

dr42 14y ago

This is a very handy piece of js. thank you

iamdann 14y ago

This is great. Super easy to implement, too.

mrchess 14y ago

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

markyc 14y ago

great work! 1 q: no "previous" button?

nimblegorilla 14y ago
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 14y ago
  I am the OP. A pull request would be very welcome!
sorich87 14y ago
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.

sbashyal 14y ago

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.

crcsmnky 14y ago

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 14y ago
Don't study/do either of those, but was thinking the same thing. Keyboard nav would be great.
- tagawa 14y ago
  Agree - this is also needed for accessibility reasons. Either something like Spacebar for next, or Tab/arrow keys.
  - sorich87 14y ago
    We will definitely add that.

zalew 14y ago

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

sorich87 14y ago
You can just use the popover plugin from Bootstrap. You don't have to use the full framework.
- zalew 14y ago
  oh, if so, that's cool, tx. OP should tell about it on the page.

dools 14y ago

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/ http://30s-demo.mockups.decalcms.com/

brentm 14y ago

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

cow 14y ago

this is awesome

ericcholis 14y ago

For those that are interested, there is something similar for Zurb's Foundation framework: http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin http://www.zurb.com/playground/jquery-joyride-feature-tour-p...

jacktang 14y ago

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

jonstjohn 14y ago

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.

ThomPete 14y ago

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 14y ago
That's some great feedback! Thanks.