Creating A Website Tour With jQuery

If you have a web application where users need to know few tricks before using it, guiding them in the beginning would be a good idea.

Codrops is sharing a very nice jQuery script that makes creating a chic site tour so easy.

jQuery Site Tour

It works by adding classes (with a specific format) to the elements to be highlighted and configuring them to display any custom text.

The script can work manually by the user clicking prev-next links or totally automated in the pre-defined order.

Tooltips displaying the information can also be customized as color, position and the duration they will be active.

  • Josh D.

    The link provided in the RSS feed is incorrect, it points to ‘creating-a-website-tour-with-with-jquery/’ when it should be ‘creating-a-website-tour-with-jquery/’

  • @Josh,

    Thanks very much for the info.

    The post was first published with the wrong link and updated afterwards.

    However, the wrong should be forwarding to the right one as well: http://www.webresourcesdepot.com/creating-a-website-tour-with-with–jquery/

  • This is actually very cool in nature. I can see how it can help out first time users. I wonder if you can get rid of it if the user doesn’t want it the next time they log in.

  • Josh D.

    You tried to access the address http://www.webresourcesdepot.com/creating-a-website-tour-with-with–jquery/, which is currently unavailable. Please make sure that the web address (URL) is correctly spelled and punctuated, then try reloading the page.

    It seems this is just a problem with Opera 11. Chrome 8, Firefox 4 and Safari 5 all load the page using the incorrect link just fine.

  • this looks promising…will check it out, thank you for sharing

  • chiana16

    Nice !

    i also use a tool called walkme to create site tours \ tutorials if you’ve heard about it

    http://www.walkme.com/

  • This is the best way to guide your first time users.
    How many times have you visited a website I didn’t know where to start?

Search