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

    Mary lou,

    Exactly what I was looking for!!!

    This is a great tutorial ! Thanks for sharing.Keep it up!

  2. 2

    Simplemente genial, este blog es la onda :)

    Just great, this blog is awesome
    Hi from Mexico

  3. 3

    This is just what I was looking for. Really nice!

    Thanks for sharing Mary Lou.

  4. 4

    That’s amazing plugin!! Just saw it in TM blog! Very useful, a great “new” way to present tours (FB like).

    thanks!

  5. 5

    great script, however, it conflicts with jquery.svgdom.js, a part of the jQuery SVG plugin from http://keith-wood.name. If jquery.svgdom.js is included in the web page which triggers the Tour, there is an error.

  6. 6

    Hi–

    Have you released this under a license like BSD? I would like to use it in a project.

  7. 8

    hi!
    well done is clean and easy to setup.
    i have a question how could you initiate the tour from a button or a link instead of auto loading?

  8. 11

    Cheers for this “Web site tour” ! I used it for my web site and it works great ! great article !

  9. 12

    Great Stuff ! Like others said before, I love your stuffs Mary Lou. What is the purpose of :
    showControls();
    because when I remove it, nothing works !
    Another question, is it easy to modify the script in order to have the “previous” and “next” button and the autoplay at the same time ?

  10. 13

    Awesome demo and really easy..

    Can i modify the script so it runs when the user click the “Tour” Link not on page load

  11. 14

    Hello, this script isn’t compatible with Jquery 1.6.
    What i have to change?

  12. 15

    Hello,
    to use id instead of class you can change this line
    var $elem= $(‘.’ + step_config.name);
    to —>
    var $elem= $(‘#’ + step_config.name);

    But, is it possible to use at the same time id and class ???

  13. 16

    Hi, I’ve intergrated the tour on my wordpress website but would not like it to pop up on every browser load, is there a method to set it not to come up if the user clicks the close or end tour?

    And can there be a time period before it is show again?

  14. 17

    I also found that this does not work with jquery 1.6+.

    I am working on solving the issue now. If anyone has already resolved it please update the thread with the fix.

    Thanks,
    -Keith

  15. 18

    You need to change the contents of the $tooltip var for jquery 1.6+.

    It adds an attribute of “className” as opposed to “class”

    Here is the fix :

    Change

    var $tooltip = $(”,{
    id : ‘tour_tooltip’,
    className : ‘tooltip’,
    html : ”+step_config.text+”
    }).css({
    ‘display’ : ‘none’,
    ‘background-color’ : bgcolor,
    ‘color’ : color
    });

    TO:

    var $tooltip = $(”,{
    id : ‘tour_tooltip’,
    class : ‘tooltip’,
    html : ”+step_config.text+”
    }).css({
    ‘display’ : ‘none’,
    ‘background-color’ : bgcolor,
    ‘color’ : color
    });

  16. 19

    Absolutely brilliant script, love it!

    Has anyone found a way of getting the arrows to work in IE yet? I hate IE and would rather just forget about it but it would be nice to have the arrows visible.

  17. 20

    AWESOME Script!

    Is it possible to put a video in the pop-up boxes via an include statement, or otherwise?

  18. 21

    Is it possible to tour a screenshot image? Some sites in my portfolio are offline. I only have screenshots. These are full window shots that require scrolling down. I’ve seen your article on “Image Zoom Tour.” I’m looking for something more like this “Website Tour.” I like the next button rather than clicking on the image. Thanks a lot, Mike – PS: This website is great!

Comments are closed.