Website Tour with jQuery

Today we want to share a little script with you that allows to create a tour on a website with jQuery. This can be very useful if you want to explain your users the functioning of your web application in an interactive way. You might have noticed that Facebook used something like […]


View demoDownload source

Today we want to share a little script with you that allows to create a tour on a website with jQuery. This can be very useful if you want to explain your users the functioning of your web application in an interactive way.

You might have noticed that Facebook used something like this to explain the new features of the profile.

The idea is to add a certain class to elements that you want to guide the user through and explain what they do. We will use a little tooltip to show what that tour point is about, and a navigation will allow the user to go back and forth, to end the tour or to restart it.

Another option that you can use is autoplay which will allow the user to simply sit back and watch every step without having to click on the next button. You can see this in action here

To use this, you simply have to add a certain class to an element that you want to describe in the walk-through. We will be using “tour_1”, “tour_2” and so on:

<div class="box left">
	<h2 class="tour_1">Create a tour</h2>
	<p>Far far away, behind the word mountains, ...</p>
</div>

Now, we will configure the steps in a JSON object. The following parameters can be set:

  • name: the class given to the element where you want the tooltip to appear
  • bgcolor: the background color of the tooltip
  • color: the color of the tooltip text
  • text: the text inside of the tooltip
  • time: if automatic tour, then this is the time in ms for this step
  • position: the position of the tip

So, for our first tour step we would add something this:

var config = [
	{
		"name" 		: "tour_1",
		"bgcolor"	: "black",
		"color"		: "white",
		"position"	: "TL",
		"text"		: "Some text here",
		"time" 		: 5000
	},...
]

By default, we will have autoplay disabled. If you would like the walk-trough to be automatic, then just change the autoplay variable to true (line 158).

For the position of the tooltip we have the following possible values:

  • TL: top left
  • TR: top right
  • BL: bottom left
  • BR: bottom right
  • LT: left top
  • LB: left bottom
  • RT: right top
  • RB: right bottom
  • T: top
  • R: right
  • B: bottom
  • L: left

The last four ones are all centered.
You can adapt the style of the navigation buttons in the jquerytour.css.

We hope you find this script useful! Enjoy!

View demoDownload source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 77

Comments are closed.
  1. 3

    No need to say any more, awesome. I’m waiting for new Codrops’s posts everyday via email scribe.
    Thank you!

  2. 8

    What a great idea and it’s extremely easy to implement.

    When I clicked “Next” the first time, I didn’t notice that it turned into a “Previous” button, and so I clicked it over and over again and all it did was toggle between the two.

    Thanks for sharing all of this work!

  3. 12

    Great job !
    Just a probleme with Internet Explorer. the tooltip_arrow are not “leftright.png” and “topbottom.png”

  4. 13

    In the Demo, when go through the whole tour, then you click to Restart the tour, you don’t get a “Next” button, so you can’t go anywhere after that other than End Tour. (IE8, if that matters)

    Also, I’d love to see an auto-play example as part of the demo, too.

  5. 15

    This is awesome for some Chrome Web Apps I’m working on.
    And maybe many other sites … cool!

  6. 19

    Wow this is pretty cool and I think this will be very useful for me… Thanks for sharing all those beautiful tuts/scripts/ideas :)

  7. 21

    Would be nicer still, if the div element it focused on when stepping thru the tour, remained with different opacity.. would give a real focus on this element feel.
    Great tut tho. Thanks

Comments are closed.