From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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!
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 ?
Awesome demo and really easy..
Can i modify the script so it runs when the user click the “Tour” Link not on page load
Hello, this script isn’t compatible with Jquery 1.6.
What i have to change?
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 ???
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?
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
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
});
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.
AWESOME Script!
Is it possible to put a video in the pop-up boxes via an include statement, or otherwise?
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!
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.
Does anyone know how to make this script work if your using jquery 1.6 in another script?
Thx
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?
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)
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
If i use jquery 1.6 or above, the plugin donot works. Can the download copy updated to use the latest jquery version?
For 1.6+ use the modifications proposed by KEITH MUENZE. BTW thank you Keith.
Does anybody know how can we make the dialog borders not black i.e. white?
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.
Awesome library! Would be awesomer if it lived on GitHub (or similar)?
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.
How to configure the TOUR to appear once.
Good tutorial!, Thanks: D
Hi there, nice tutorial. is there a way to get it work with jquery 1.7.1? i dont get it fixed… :/