Tiny Tools

TourTip

TourTip is an interactive visual guide to elements on web pages.

Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions.

TourTip is an interactive visual guide to elements on web pages.

Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions.

TourTip is a simple library for creating guided tours through your application. It's better suited to complex, single-page applications than websites. Our main requirement was the ability to control the interface for each step. For example, a step might need count seconds before moving to the next step, or wait for the user to complete a task. TourTip gives you the ability to manage these parameters all at once or for each step separately.

TourTip gives you everything you need to call out new features in your application or website. It 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 even used some fancy CSS to avoid images.

You can also add external content as well as images to the guides to make them more comprehensive.

The plugin is pretty powerfull and has a lot of options which gives you the power to build a very cool tour.Use TourTip for your websites, products, applications, landing pages or something else.

Simplicity, scalability and unmatched performance: everything you need to create a tour for your website is crafted in one plugin:
  • Ease of use
  • Dynamically add or remove tour steps
  • Applying optional parameter for all steps all at once, or for each step separately
  • It works for every screen size
  • Switching to the next step automatically, manually, or a combination of both
  • Position the nub per TourTip
  • Support for external contents
  • Optional close button to destroy tour
  • Optionally fade in and fade out to move to the next step
  • Scroll smoothly to the reference element
  • Support for both fixed and absolute element positions.
  • Support for nested scrolled elements
Step 1:

Pack Your Bags

  • Download TourTip
  • Add the following markup to your document <head>
  • You also need to copy downloaded img folder next to the css folder of the plugin. and you’ll have everything you need to start a tour on yout web page.

/* Attach the Tourtip CSS file */
<link rel=" stylesheet" type="text/css" href="css/tinytools.tourtip.min.css">
/* jQuery needs to be attached */
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
/* Then attach the TourTip plugin */
<script src="tinytools.tourtip.min.js"></script>

Step 2:

Prepare layouts for tour elements

There is no need to have any container for each tour element. You just need to introduce the tour elements on your page to the plugin and set the necessary options. For example, supposing you have a div element on your page which is identified as TourElement1. put the following code in the ready event of your document to create a tour layout for the mentioned div element: 
	
<script>
	$(document).ready(function () {
		$("#TourElement1").tourTip({
			title: "Tour Title",
			description: "This is a description for the newly born TourTip :)",
			previous: true,
			position: 'right'
		});
	});
</script>

You may not bind the tour layout to any predefined element; in this case, simply create the tour element by calling directly the tourTip create public methode: 

<script>
	$(document).ready(function () {
		$.tourTip.create({
			title: "Tour Title",
			description: "This is a description for the newly born TourTip :)",
			previous: true,
			position: 'right'
		});
	});
</script>

Step 3:

Start The Engine

Up to this point, you will see no TourTip on your page. Just call the start public method to start the tour engine: 

<script>
	$(document).ready(function () {
		$.tourTip.start();
	});
</script>

Optionally, you can pass the settings to the start method. The settings in the start method will be applied to all of the tour layouts all at once. the settings you apply for each tour layout separately, will overwrite the general settings.

Optional Parameters

Property Default Description
title '' The title of the created TourTip layout
description '' The description paragraph of the created TourTip layout
position bottom The position of the TourTip layout in relation to the selected element on the web page. It can be 'bottom', 'top', 'left', or 'right'
parentScroll $('body') This property indicates the scrolling parent element to be scrolled when the tour element is out of the view area.
externalContent undefined externalContnet is any other jquery element in the current web page which will be added to the bottom of the description. If externalContentHtml is defined, this property will be ignored.
externalContentHtml '' Instead of externalContent element, you can directly add any HTML content to the bottom if the description using this property.
closeIcon true Close icon will be shown at the top right corner of the TourTip layout if this property is set to true.
nextButtonText Next The text of the Next button
previousButtonText Previous The text of the Previous button
closeButtonText Close The text of the Close button
next true if true, the Next button will be shown in the TourTip layout. This button will not be shown in the last TourTip layout.
previous false if true, the Previous button will be shown in the TourTip layout. This button will not be shown in the first TourTip layout.
close false if true, the close button will be shown in the TourTip layout.
width '300px' The width of the TourTip layout
height 'auto' The height of the TourTip layout
animation 'fade' This property defines the way for switching between layouts. The available values are 'fade' and 'none'.
smoothScroll true If true, the page will be scrolled to the layout target element smoothly.
onShow false Callback that fires before showing the TourTip Layout
onHide false Callback that fires before hiding the TourTip Layout
onNext false Callback that fires before switching to the next TourTip Layout
onPrevious false Callback that fires before switching to the previous TourTip Layout
onClose false Callback that fires before closing TourTips
onStart false Callback that fires on starting the tour

Methods

Method Description
$.tourTip.create(options) Creates a new tour step which is not bound to any element. The created free tour step will be shown at the middle of the screen. Options parameters are explained in the "Optional Parameters" above, and will be applied just to the created free tour step.
$.tourTip.start(generalOptions) Starts the tour. The generalOptions parameters are explained in the "Optional Parameters" above, and will be applied to all of the tour steps. These parameters may be overwritten by any of the tour steps specific parameters.
$.tourTip.next() Hides the current tour step, and will show the next one if available.
$.tourTip.previous() Hides the current tour step, and will show the previous one if available.
$.tourTip.close() Closes the tour immediately.