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 […]

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!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 77

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

  2. 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. Great job !
    Just a probleme with Internet Explorer. the tooltip_arrow are not “leftright.png” and “topbottom.png”

  4. 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. This is awesome for some Chrome Web Apps I’m working on.
    And maybe many other sites … cool!

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

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

  9. 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 πŸ™‚

  10. Hi ML, noted in your js, this:

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

    Shuldnt the closing span tag be a closing a tag

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

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

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

  13. Hi,

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

    Thanks

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

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

  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

  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

  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

  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))

  20. Mary lou,

    Exactly what I was looking for!!!

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

  21. Simplemente genial, este blog es la onda πŸ™‚

    Just great, this blog is awesome
    Hi from Mexico

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

    thanks!

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

  24. Hi–

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

  25. 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?

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