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/’

  • Umut M.


    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:–jquery/

  • Thai Bui

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

  • Indezoo

    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

  • Ronald | Excellent Verkooptraining

    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?