An easy step-by-step tour for the complex web interfaces
For each tour's message you can specify one of the 36 positions' variants
Click on any white line
Next Example
Auto Position
The plugin can automatically choose the best position out of 36 available to display a tour's message
Look at a few examples
Next Example
Detect Events
To go to the next step you can require perform any event.
Events can be «click», «hover», «mousedown», «mouseup», «mouseenter», «keydown», «keyup», «blur», «submit» and others
Next Example
Trigger Events
The plugin itself can perform various actions with objects.
Activities such as «click», «mousedown», «mouseup», «mouseenter», «keydown», «keyup», «blur», «submit» and others jQuery events
Next Example
Callback Functions
For each step, you can specify three functions: before, during and after
Next Example
Map of Tour
Map of tour makes it possible to see all steps of the tour and switch between them
Next Example
Button Text
You can change the Text of the buttons "Next" and "Prev" for each step separately.
Default Button Text
Custom Button Text
Icon Button Text
Next Example
Supports 60 languages.
View example of localization
Any element 1
Any element 2
Any element 3
Next Example
Opening remarks before the tour.
Any element 1
Any element 2
Any element 3
Next Example
Message in Center
Next Example
Image Content
Step cover
Next Example
As tabs you can use jQuery UI Tabs plugin

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

Scroll to Top
Media Content
Youtube or HTML5 Video or Audio Contents
Any element 1
Any element 2
Any element 3
Scroll to Top

An easy step-by-step tour for the complex web interfaces

Pages tutorial

This script allows to create the pages tutorial for 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 pages tutorial 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 pages tutorial or to restart it.

Product tutorials

A responsive product tutorials, with a step-by-step guide to help users understand how to use your product.

A responsive product tutorials, with a step-by-step guide to help users understand how to use your product. Onboarding processes are essential to let users familiarize with your product/website/app functionalities as soon as possible.

A responsive product tutorials, with a step-by-step guide to help users understand how to use your product. Today we release a handy product tutorials powered by CSS and jQuery, characterized by a user experience that changes according to the device size.

A responsive product tutorials, with a step-by-step guide to help users understand how to use your product. On all devices, the product tutorials is open as a modal window (with a smooth scale effect achieved adding a CSS3 transition to the scale property of the list items): each step shows a title, a description and an image representing the feature being displayed. The css for this version is pretty straightforward.

A responsive product tutorials, with a step-by-step guide to help users understand how to use your product. 36 different classes have been defined to control the position of the tooltip relative to the dot indicator.

A responsive product tutorials, with a step-by-step guide to help users understand how to use your product. We used jQuery to implement the product tutorials navigation functionality (with keyboard, touch swipe and previous/next navigation).

Web page tutorial

This jQuery based web page tutorial plugin offers an easy way to guid your visitors and customers through your website or application and contains a lot of options and a powerfull API to fit your needs.

This web page tutorial plugin comes with the ability to automatically select the position of the dialog box, depending on the screen size and position of the page.

This means that on any device you can always see the description of the step and the navigation buttons.

Step by step guide

Setting up step by step guide is simple, just choose the needed options in builder , and replace it value. Then you will get the full code to connect the step by step guide to your site that you need to copy into your page code

Step by step guide is extremely flexible and lets you take control of how people interact with your tour. We programmed it to be cross-browser compatible with modern browsers and used some fancy CSS.

Step by step guide will work with any element in your markup, the only requirement is that the element must have a unique id to tell the Step by step guide plugin it is a stop of the tour. You will use the id or class of each "stop" when you create your tour outline in the next step. In case of classes, step by step guide will select the first matching element.

Page guide

itour is a simple library for creating page guide through your app. It's better suited to complex, single-page apps than websites. Our main requirement was the ability to control the interface for each step. For example, a step of page guide might need to open a window or menu, or wait for the user to complete a task. Tourist gives you hooks to do this.

Specify steps explaining elements to point at and what to say. Tourist manages moving between your steps.

Tourist was designed for complex apps rather and websites. It's easy to: 1. control the interface for each step 2. move to the next step only after the user completes a specific task Just use the functions in your step options of your page guide.

Site guide, tour page, jquery tour plugin, site tour

itour is a powerful jQuery site guide plugin, which can be used as a tour page, helpers, guides or tooltips. The jquery tour plugin is pretty powerful and has a lot of options which gives you the power to build a very cool and creative tour.

To help you build a site guide we have included several examples on how to build different kinds of tour page. Examples include from a basic site tour, multiple pages site guide, using callback functions and using validation. All examples are included in the zip file.

The site guide plugin alows you to setup multiple tours with multiple steps on the same page. You even can continue on the next page with the tour page if needed.

All steps of site guide need to have an unique id, this id is used to place the content in the right wrapper(step). You can not use the same step serveral times in the site tour, as this will show an empty wrapper(step).

Website Tour jQuery, website tour plugin

The website tour plugin provides several callback function which are fired at certain points in the tour. These functions can contain your own custom code to extend the power of this website tour plugin even more.

Manage the website Tour jQuery with the navigation actions/buttons. These custom dataset attributes can be used with almost every kind of element inside or outside the steps. Navigation actions are best used with a anchor element.

The website tour plugin at defaults supports the use of keyboard navigation, this allows you to navigate through the website Tour jQuery with the use of a keyboard.

All targets can be disabled by using the disable parameter for this element.

The website tour plugin provides multiple public API methods which can be used to update, run or destroy a tour. See the reference tab for more info about the available API methods.

Jquery tour, tour jquery

itour is an interactive visual jquery tour to elements on web pages. Instead of cluttering your interface with static help message, or explanatory text, add a tour jquery and let your users learn about new features and functions.

This jquery tour is a handy tool tour create website tour jquery for your visitors. It's the perfect tool to gain attraction and reach more time spent on your website. M

Usefull for introduce your site for new visitors, to introduce the new design of your site or to help users to learn the usage of your site.

The website tour jquery plugin is cross-browser compatible and works out of the box, it's horribly easy to use and customize and has advanced control engine. Users hardly accept old sites with new design as they feel uncomfortable. The jquery tour will help you to solve this!

Jquery help plugin, jquery site tour, website tour, product tour

Have you ever wished there was an easy way to guide your users through different features of your site? We have now made it easy for you to create a jquery help plugin of any part of your website!

This jquery site tour allows you to create multiple tours on your website with jQuery. This can be very useful if you want to explain your users the features of your website in an interactive way.

You can create website tour that are spanning over multiple pages and link tours together. Easily add your tour slides with our jquery help plugin.

If a visitor interrupted jquery site tour for some reason, then the next time he will be asked to go on product tour with the same place.

Website tour plugin, page tour, site help

itour is a powerfull website tour plugin, which can be used as a page tour, site help, guides or tooltips. Use the website tour plugin for your website, products, applications, landing pages or something else.

The page tour is very easy to use and allow you to create a cool site help in simple steps.

Website tour plugin gives you the ability to create amazing design of page tour which easily arouse visitor interest, with a User Friendly builder, highly customizable solution to build your site help into your site.

Virtual tour jquery, jquery step by step

When new users visit your website or product you should demonstrate your product features using a jquery step by step guide.

Even when you develop and add a new feature to your product, you should be able to represent them to your users using a user-friendly solution virtual tour jquery.

itour is developed to enable web and mobile developers to create a jquery step by step introduction easily.

It is always hard to guess how users browse + how they perceive the content and flow of a website or web app.

However, it is always a great idea to guide users whenever they want. Nothing to lose on that for sure.

There are awesome virtual tour jquery plugin that ease guiding users and creating site/page jquery step by step tours for them. It are stylish, customizable and simple to use.

Site tour jquery, interactive tutorials, jquery virtual tour plugin

site tour jquery focuses on objects beautifully and pretty easy-to-setup. While a floating box helps managing the interactive tutorials, tooltips (that can be positioned however wanted) help focusing on the elements.

The steps are highlighted beautifully and a sticky footer/header allows navigating through them while providing extra info about each step. This is a very nice jquery virtual tour plugin by the talented masscode.

Site tour jquery is works well in responsive layouts and has almost everything customizable. A simple-yet-useful interactive tutorialsplugin where all the details and content are defined in JS. There are options to customize the content and position of the tooltips.

It is jquery virtual tour plugin to show popovers on a page's elements to show/guide your users around. especially first-time users.

jQuery virtual tour examples,Bootstrap Tour,intro js, jquery guided tour

I wanted a simpler, less things-happen-automatically toolkit for making website introduction.

jQuery interactive tutorials takes more of a toolkit approach than some of the alternatives as Bootstrap Tour or intro js, that try to have focusing elements, auto-progress with timers and indicators, on and on, all built in... too much stuff! Less is more!

The jquery guided tour plugin has lots of options to customize the look or delay between steps, setting the initial item to be shown and more.

Start by including the website introduction plugin and base styles on your page, of course. Then we can define some 'legs' of our interactive tutorials. Imagine you have a page with some stuff you want to lead the user through, maybe some elements.

Lastly, maybe you want to draw a lot more attention to a specific target element as the website introduction is going on. We want the rest of the page to gray out, and only the element pointed to by this leg to be visible as usual. Easy.

For websites, it's quite common that you need to have a interactive tutorials trip to teach new comers how to user your own services. In addition to this, when there is any new feature coming up, you also need that to make sure your hard works do have been seen and used by users. Same like you, we have been making tons of routine works like that and that's why we are going to make a super lightweight library - website introduction itour that you can use for most cases ! Hope you will like it :)

Buy plugin