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. 1

    Just another suggestion.

    We have say this_page.html and the tour is at this_page_tour.html . Is there a way , that when tour is complete we can auto redirect to this_page.html ?

    Regards

  2. 2

    Yes that is possible @Steve ;)

    I am playin’ around with the “plugin” and I was thinking of using the jQuery Tools Exposure plugin to “highlight” the div element that is getting focused.

    I wish the whole CoDrops team a merry xmas … and a peaceful time… ofcourse all others here, too :)

  3. 6

    Hi ML, noted in your js, this:

    $tourcontrols += ‘<a>Restart the tour’;

    Shuldnt the closing span tag be a closing a tag

    • 7

      Hello Steve,
      that’s true, instead of the span after “Restart the tour”, it should be an ending “a”.
      Thanks,
      Cheers, ML

  4. 8

    Hi,

    i added a new case in the position-switch:

    default:
    properties = {
    ‘left’ : ‘50%’,
    ‘top’ : ‘50%’,
    ‘margin-top’: ( $tooltip.height ( ) / 2 ) * (-1),
    ‘margin-left’: ( $tooltip.width ( ) / 2 ) * (-1),
    };
    break;

    so if you leave the position blank, set it to false or do anything else, the tooltip would be placed in the centre of the screen…. :-)

    nice work btw. i’ll do some additional work to make a real plugin out of it… :-) if it’s okay to you.

  5. 9

    hi, sorry: me again :-)

    i forgotten to say i’ve changed the line:

    var $elem = $(step_config.name);

    to:

    var elSelector = step_config.name || ‘#tour_overlay’;
    var $elem = $(elSelector);

    if you want to place the tooltip in the centre of the screen you have to set “name” to false, so the tooltip will be bound to “#tour_overlay” by default.

    thx.

  6. 10

    Hi,

    This doesnt seem to work in jQuery 1.3.2 – just wondering what’s causing it to fail in this lib ?

    Thanks

  7. 11

    Hi,
    thank you for this great plugin!
    I only have one question: Is it possible to open the tour only when you have clicked on a button on the page? And when yes, how?
    thx

  8. 13

    This is great! I like the interactive jquery tour and will be very useful in directing the user on the elements of a website. Good for instruction.

  9. 16

    Hi! Would You like to help me? How I can make to start this plagin only when definite variable have a definite value. Example, $first_enter = 1.
    Great Thanks

  10. 17

    Oh very cool tut.

    I will definately implement it on my site.

    Is it possible to highlight a whole div with this or it only suppors the box appearing on top of the defined class?

    regards
    Nick

  11. 18

    I want to use this beautiful effect on my website. It works on Chrome, Safari & Opera but IE8 doesn’t show the arrows of the tooltips ?

    Is anyone knows why ?

    Thanks

  12. 19

    Ok, Mary Lou, you are a “Beast”! Who are you, where do you come from and are there more like you there? Seriously, I’ve been browsing this site for a few minutes now and everything thats got your name on it has been worth checking out. Remarkable content, congrats. (ps: send me a note, lets talk. (biz))

Comments are closed.