Lightweight Site Feature Tour Plugin – uxTour.js

Category: Javascript , Recommended | December 29, 2019
Views Total:2,220 views
Official Page:Go to website
Last Update:December 29, 2019


Lightweight Site Feature Tour Plugin – uxTour.js


uxTour.js is a lightweight vanilla JavaScript library which helps you create an interactive feature tour by highlighting the specified element with a circular mask.

How to use it:

Download and load the uxTour.js library when needed.

<script src="uxTour.js"></script>

Initialize the plugin with some optional properties.

var uxTour = new uxTour();
Set the steps for the tour. This is where you forexmaple dynamically empty and add new steps for dynamic page loads.
var tour = {
    steps: [
        {element: 'uxStep1', text: 'Here you can have some related text'},
        {element: 'uxStep2', text: 'You can allways start the ux tour guide again here. This also works on fixed items', style: 'fixed'},
        {element: 'uxStep3', text: 'Includes auto scrolling.<br> Is also responsive. try resize the window!', position: 'top'},
        {element: 'view-source', text: 'This demo page is based on MDL-lite framework.<br> Klik here to see more about this awesome material design framework', style: 'fixed', position: 'top'}

Start the tour. Pack it into a function for re-opening the ux guide.


Full options for steps.

steps: [
    element: 'uxStep1', 
    text: 'Here you can have some related text',
    direction: 'bottom', // or 'top'
    offset: 100,
    position: 'absolute' // or 'fixed'
  ... more steps here ...

Possible options to customize the tour.

var tour = {
    // padding in pixels
    padding: 16,
    // opacity of the overlay
    opacity: 0.7,
    // overlay color
    color: '#000000',
    // button text
    buttonText: 'GOT IT',
    // or 'box'
    frame: 'circle'



  • Options updated

You Might Be Interested In:

2 thoughts on “Lightweight Site Feature Tour Plugin – uxTour.js

  1. Chris Berberich

    This is a fantastic plugin and ideal if you want a lightweight plugin. Kudos to the developer!

  2. Kylian

    Very nice ! However, the autoscrolling function doesn’t seem to work in Chrome…


Leave a Reply