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:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

Feedback 77

Comments are closed.
  1. 1

    Thanks for this cool tutorial.

    I modified your code a bit to bring the tooltip element to the front of the overlay and move it back to it’s original z-index when it dissapears.

    Here is my tweak:
    Right before the switch for (tip_position), add this code.

    $elem.css(“position”, “relative”);
    $elem.css(“z-index”, “101″);
    $(‘#tour_tooltip’).data(“Element”, $elem);

    Next. In the removeTooltip() method, add this code.

    if ($(‘#tour_tooltip’).data(“Element”) != null) {
    $(‘#tour_tooltip’).data(“Element”).css(“position”, “inherit”);
    $(‘#tour_tooltip’).data(“Element”).css(“z-index”, “1″);
    }

    Hope this helps for alot of you guys.

    Thanks.

  2. 2

    Does anyone know how to make this script work if your using jquery 1.6 in another script?

    Thx

  3. 3

    Hello,
    i love this script, but can anyone help me with some tweak

    How can i make this to call on a click of a link rather then on a page load?

  4. 4

    Hi, how you can configure the Tour to not be visible anymore, when clicking on “End the tour”? (Facebook style: By canceling the Tour will not appear anymore in the page, even so reload or refresh the page)

  5. 5

    i am still waiting for the answer…can anyone help me with it

    how can i call this on click of a link and not on every page load

    pls help me

  6. 6

    If i use jquery 1.6 or above, the plugin donot works. Can the download copy updated to use the latest jquery version?

  7. 9

    This is one of the coolest plugins I’ve seen in a while.

    One obvious problem though is that the next and previous buttons should have absolute positioning.
    The next button moves to the right after clicking it once, which is a little annoying.

  8. 11

    Hiya! Nice plugin Mary. However, it would be great if you could modify it such that the highlighted or the section with the tooltip has its z-index brought forward so that it looks like a lightbox from the rest of the the masked screen. Just a thought though.

  9. 13

    Hi there, nice tutorial. is there a way to get it work with jquery 1.7.1? i dont get it fixed… :/

Comments are closed.