javascript library guided tour

7 Awesome JavaScript Product Tour Libraries

Top javascript tour libraries that will help you guide users through using your app..

Shanika Wickramasinghe

Bits and Pieces

Tour and guide libraries are there to help you guide your users through using your app. They do so by adding extra information to your UI, by providing tips or text (usually obtained from the server in JSON format), and by adding step-by-step instructions regarding the UI and/or functionalities of your web app. This post will cover my seven personal favorite libraries.

Build a Clear UI (Before Using Guide Libraries)

“A user interface is like a joke. If you have to explain it, it’s not that good”. — Martin Leblanc

As you well know, nothing beats a self-explanatory UI. Instructions of any type should only be used after you’ve done your best in delivering a clear UI and a great UX. One key step in achieving that is building a design system .

Design systems or UI libraries are a way to reuse and standardize UI components (among other things). They’re a great way to maintain consistency in style and function, making your app more predictable and much easier to learn (less variance in UI means fewer things need to be learned).

Design systems are no longer a luxury enjoyed exclusively by large enterprises. Thanks to new cloud solutions like Bit.dev , design systems or UI libraries can grow and expand as you build your app. You can simply push individual UI components from any codebase/repository to a shared component hub where you and your team may discover, test, use and collaborate on them. Bit supports React, React with TS, Angular, VueJS and many others.

Building a UI Component Library for Your Startup

How to build a component library that suits your startup’s needs..

blog.bitsrc.io

1. Intro.js

Intro.js is widely used due to its user-friendly solutions and has 19k GitHub stars. Its most important features are:

• No dependencies: It does not require any other dependencies
• Small and fast: The library’s smaller size makes the guiding process smooth and intuitive. The overall size of JavaScript files is 10KB, and CSS is 2.5KB.
• User-Friendly: Navigation is user-friendly and provides various themes that can be selected as per your preference.
• Browser Compatibility: Works on all major browsers like Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.
• Documentation: The documentation is excellent with samples and examples of each element to be introduced.

Intro.js is a free and open-source library, however, if you are using the library for your business you can subscribe…

introjs.com

How to Install

To use Intro.js, you need to have npm and Node.js installed. Alternately, you can get Intro.js from:

• Its GitHub repository: use, git clone https://github.com/usablica/intro.js.git
• using bower:
• CDNs ( jsdeliver.com , cdnjs.com )

Once you have installed intro.js, there are three simple steps to add it to your project:

• Add the JS and CSS files (intro.js and introjs.css) into your project. If you require right to left language support, you can also add introjs-rtl.min.css.
• Add the attributes data-intro and data-step to the relevant HTML elements. This will enable intro.js for the particular elements.
• Call the following JavaScript function:

Use the following additional parameter to call Intro.js on a particular element or class.

Here is an example page where the user-friendly Intro.js is seen working.

See the Users

Intro.js is used by many organizations like SAP, Amazon, Nestle, and Kobo.

2. Shepherd

Shepherd has 8.1k GitHub stars , and its website demonstrates how it works. Here are its main features:

• Accessibility: Provides keyboard navigation support, follows a11y compliance, and also uses JavaScript to enable focus trapping inside DOM elements.
• Highly Customizable: Allows changing the look and feel without affecting performance.
• Framework Ready: Readily ingrates into your project’s front-end framework.
• Documentation: Documentation covers installations and customizations including theming, and styling for your projects.

Shepherd - Guide your users through a tour of your app.

Guide your users through a tour of your app..

Guide your users through a tour of your app.shepherdjs.dev

Shepherd is integrated with many major front-end frameworks and provides the following wrapper facilitates out of the box:

• Angular: angular-shepherd is an Angular wrapper, compatible with Angular 8+.
• Ember: ember-shepherd is an ember wrapper, tested with Ember.js >= v3.8, and is compatible with Ember CLI v12.3.
• React: react-shepherd is a React wrapper.
• Vue: vue-shepherd is a Vue wrapper.

You can directly install these wrappers using npm or yarn:

It can also be pulled directly via JsDeliver from the CDN:

Once you have installed Shepherd, you can include the CSS and JS files as follows:

Here is an example of creating a Shepherd tour and adding steps with DOM elements attached to it.

Shephard is used by companies like SimplePlanner and Brokermate to guide their users through the initial steps of their applications.

3. Bootstrap Tour

Twitter Bootstrap provides its own free tour implementation with Bootstrap Tour. It has 4,315 GitHub stars.

Bootstrap popovers are quick and easy to build. This is a jQuery-based plugin for bootstrap and uses the power of DOM and JavaScript configuration to build the tour. It’s as simple as including the JS and CSS files and provides in-depth documentation.

Bootstrap Tour

If you are using bootstrap, include bootstrap-tour.min.css and bootstrap-tour.min.js: otherwise, just include….

bootstraptour.com

You can simply use the CSS and JS files of bootstrap:

Or use standalone CSS or JavaScript files:

You can even pull the JS and CSS files from CDN.

After the initial setup, you can create an instance of the tour and add steps with the element details as follows:

4. Chardin.js

Inspired by Gmail’s new composer tour, Chardin.js is a simple overlay of instructions on existing elements. It uses a JQuery plugin to display instructions. The GitHub page contains the instructions and documentation and has 4.9k GitHub stars.

Chardin.js - Simple and beautiful overlay instructions for your apps.

heelhook.github.io

You can fork the GitHub repo or download the required CSS and JS files chardinjs.css and chardinjs.min.js and add them to the HTML page.

After setting up, you can add instructions to the document. Below is an example of adding an instruction to an image element. The data-intro sets the text to be displayed and data-positions decide the position of the text.

To run Chardin in the sequential mode you need to use different instructions like data-chardin-sequenced=”true”, data-chardin-auto=”true” and data-chardin-delay=”100” to display the instructions with an automatic movement through elements.

Once the elements are ready with the instructions, you can initialize the library through a button click or make it run automatically. The library can also be limited to a particular container.

Chardin.js allows you to refresh the overlay and also provides construction options to specify URL containing text as JSON objects that can be displayed as instructions.

5. PageGuide

PageGuide is a smart guide for interactive, dynamic, and single-page apps based on jQuery and CSS3.

Pageguide by SolarWinds

An interactive guide for web page elements using jquery and css3. view the project on github tracelytics/pageguide….

tracelytics.github.io

You can install PageGuide in any one of the following four ways:

• Download the latest release from GitHub
• Clone the repo: git clone https://github.com/tracelytics/pageguide.git
• Install with Bower

Install using npm

The installation is loaded with examples and can be run using Grunt at http://localhost:3000/example/ .

For the initial setup, add pageguide.js and the CSS file as follows:

Add the following code to your HTML file to initialize PageGuide:

Specify the selector in <ul>, this will be matched by PageGuide to display the text. Below is an example of adding pageguide.js to the bottom of the page.

PageGuide is used to display static messages on the page, resulting in it being less cluttered.

6. Hopscotch

Hopscotch was built by Gordon Koo and Hans van de Bruggen as an open-source tool during LinkedIn’s Incubator program . Its main purpose was to solve problems of usability, intuitiveness, and performance.

With 4.3k GitHub stars, it is only 8kb in its minified and gzipped state. Though it does not require dependencies, it may use jQuery if available on the page. Hopscotch offers:

• Event callbacks: supports callbacks for onStart, onNext, and onClose events.
• Multipage resistance: Uses HTML5 session storage to persist the state of the tour across pages.
• i18n: Supports internationalization.
• Lightweight callouts: Manages callouts with a convenient method to create them.
• Browser compatibility: It is compatible with all browsers.
• Customizable: It allows CSS tweaks, bubble markup, and page interactivity.

LinkedInAttic/hopscotch

This project is no longer used by linkedin and is currently unmaintained. if you would like to maintain this project….

Use Grunt.js to build Hopscotch. This will run the test suite with new artifacts. Then include the two files hopscotch.js and hopscotch.css into the HTML page.

Once the initial setup is complete, you can initialize the tour using JSON.

Hopscotch can be tested using the Jasmine testing framework and allows continuous integration with Travis CI.

7. Tourist.js

Tourist.js is a simple library best suited for a single page application than a multipage website. It can control the interface at each step. Using Tourist, you can create a guide for the steps that require opening a window or menu. A series of steps can be specified with instructions for particular elements.

Despite the absence of a website, the GitHub page with 12k stars consists of extensive documentation.

easelinc/tourist

Tourist.js is a simple library for creating guided tours through your app. it's better suited to complex, single-page….

You can install Tourist.js using the following bower command:

Tourist requires jQuery and Backbone, and has the ability to use Bootstrap 3 popovers (default) or QTip2 tips along with Bootstrap 3 CSS.

The “tourist.js” JavaScript file and an optional CSS file can be used to customize styles.

After the initial setup, you can create the steps and add them to the tour instance as follows:

It also allows you to have your custom implementation for tips using Tourist.tip.

Implementing JavaScript tours and guides is an easy way to introduce users to an application. Most of these tools use CSS and JavaScript files with simple initialization. These tools are used by many top-notch companies. How your tours and guides look, and function will depend on the library you select. The right tour can make your application a lot more intuitive and attractive to users.

How to Easily Share Vue Components Between Applications

Learn how to easily share vue components between different projects, sync changes, and build faster using bit., 10 top javascript libraries and tools for an awesome ui/ux, recommended tools and libraries that will help you build a stunning web app in 2020, 11 chrome apis that will give your web app a native feel, 11 chrome apis that will give your web app a native-like user experience..

Written by Shanika Wickramasinghe

Senior Software Engineer and Freelance Technical Writer. I write about any Computer Science related topic. https://www.linkedin.com/in/shanikawickramasinghe

More from Shanika Wickramasinghe and Bits and Pieces

Top 5 React Table Libraries

Recommended table libraries for react.

Ruvani Jayaweera

Implementing the API Gateway Pattern in a Microservices Based Application with Node.js

Build your own api gateway using node.js in under 5 minutes.

Chameera Dulanga

Best-Practices for API Authorization

4 best practices for api authorization.

Geek Culture

Best React Routing Libraries

As you may know, client-side routing is an essential aspect of building modern web applications, as it allows users to navigate between…, recommended from medium.

Ameer Omidvar

Apple’s all new design language

My name is ameer, currently the designer of sigma. i’ve been in love with design since i was a kid. it was just my thing. to make things….

JavaScript in Plain English

Interview: Can You Stop “forEach” in JavaScript?

There are 3 ways to stop foreach in javascript.

Interesting Design Topics

Stories to Help You Grow as a Designer

Stories to Help You Grow as a Software Developer

Julien Etienne

Stop Using localStorage

Bid farewell to localstorage embrace indexeddb for speed, type-safe storage, and non-blocking data transactions. #indexeddb #webdev.

UX/UI-trends in 2024

The 2023 year was rich in technological innovations: we witnessed the introduction of virtual glasses from apple, the surge of generative….

Adham Dannaway

16 little UI design rules that make a big impact

A ui design case study to redesign an example user interface using logical rules or guidelines.

Punit Chawla

UX/UI Design Trends Going Into 2024

Every year, we have a line up of new design trends that not only look good, but also stick around and influence other designers to “steal”….

Text to speech

Powerful User Onboarding

Built to increase adoption, intro.js is a lightweight javascript library for creating step-by-step and powerful customer onboarding tours.

TRUSTED BY 5000+ TEAMS ALL AROUND THE WORLD

Install Intro.js

You can install Intro.js in a few simple steps. Intro.js consists of two main files, the JavaScript part and the CSS part which renders the elements nicely.

1 Include the JavaScript and CSS

Intro.js is available on NPM and most CDNs

2 Call the introJs.start() method

The start() method configures the library and starts the product tour.

Easy to Use

The simplicity of Intro.js API will help you to develop an advanced onboarding for your products. Intro.js is lightweight, 10kB and has no external dependencies!

Customizable

Intro.js provides various ways to configure your product onboarding and customize every single step of your tour.

Open-source

Intro.js is Free and open-source, published under AGPL license. We also provide commercial license, supporting your team to successfully integrate Intro.js!

Commercial license

Lifetime license. Once-off payment.

Intro.js is AGPL-licensed and open-source. However, if you want to use Intro.js in your commercial app, website or plugin, you would need to obtain a commercial license.

One project

No commercial support

Regular product updates

Lifetime license

1 month commercial support

1 custom theme

Unlimited projects

6 months support

3 custom themes

24/7 Priority Support

User-Experience, customer onboarding and tools to improve your business growth and success

5 Bad UX Examples You Must Avoid

Learn how to use the power of UX to turn your website into a successful application

Best Tools for Startup Growth Hackers in 2021

With many startups failing soon after they begin, growth hacking can make or break your marketing campaign. Here are the best tools to use

Five Amazing Benefits of User Onboarding You Should Know

Trying to figure out if user onboarding is the right choice for your product? Here's what you need to know about user onboarding and how it can make a huge difference for your company

• Hello World
• Floating Tooltip
• Progress Bar
• Scrollable Elements
• Documentation
• StackOverflow

© 2023 Usablica. All rights reserved.

Existing customer? Sign in

10 Best JavaScript Product Tour Libraries for User Onboarding

Looking for open-source libraries to build JavaScript product tours with? Here are the top 10 that we've found.

For tech-savvy teams, JavaScript product tours can be an easy solution to creating onboarding flows quickly. So here is a list of 10 open-source JavaScript product tour libraries that you might want to check out. 

Why use a JavaScript library for user onboarding? #

First, let's cover all the reasons why you might want to use JavaScript onboarding libraries.  

1. You know how to code #

A JavaScript product tour library is essentially a DIY tool. Meaning you need to know your way around code, at least for front-end development with JS and CSS. So if you don’t know how to code or you don’t have readily available dev resources in your team, this is not an option for you. 

2. You want to save money #

One of the big advantages of JS-built product tours is that they’re often open-source libraries, which means it’s free of charge. There are services that charge for commercial licenses, but they are often for a lifetime and are peanuts compared to what you would pay for a more robust no-code product adoption platform. 

3. You want to be agile #

Lastly, with a JavaScript onboarding library, you can deploy as fast as you want to, as well as have full control over what you publish. Once again, you need to be well-versed in your coding knowledge. Otherwise, a no-code solution would actually be faster than being confused about what to do. 

Your list of Top 10 JavaScript libraries for product tours #

If you type product tours or onboarding tours on GitHub you’ll find quite a number of options. But not all of them are good. Some are just unmaintained and outdated like Hopscotch . Others are just really underwhelming like Trip.js . 

So we thought we’d help you narrow it down. Let’s take a look at the 10 best JavaScript product tour libraries. 

1. Intro.js #

Intro.js is not just a random open-source library. It is quite well-known, well-supported, and widely used. In fact, if you’re looking for a reliable JavaScript product tour builder, Intro.js is probably where you want to start. It’s not completely free, but a commercial license starts from $9.99.

2. Shepherd.js #

Shepherd.js is a JavasScript library for creating product tours that relies on another open-source library called Floating UI to create dialogs for each step. You can create single tooltips with their floating dialogs or have an entire product tour with multiple steps. 

3. Bootstrap Tour #

Bootstrap Tour is a widely used open-source HTML, CSS, and JS-based frontend framework. So if your website is built on Bootstrap, Bootstrap Tour might be a good fit to build an onboarding flow with because it draws its design fundamentals from Bootstrap. Despite that, you can still use it even if you’re not using Bootstrap for your website’s frontend. 

4. Codyhouse #

Codyhouse is actually a group of 400 HTML, CSS, and JavaScript components that are compatible with any CSS framework. With those, you can make a Product Tour that is powered by CSS and JQuery. The default design is very well made, so this is highly recommended for anyone who wants a quick start. However, certain components may be behind their premium gate, so make sure you get the free one. 

5. Chardin.js #

Chardin.js is truly a barebones solution for creating onboarding tours. Essentially, it’s a layer of instructions that go over your app. You can either set the instructions to all show at once or have them go in a sequence. 

6. Product Tour JS #

Product Tour JS is a JavaScript library for creating user onboarding and product presentation. It requires JQuery to run. Essentially, it’s like any other product tour open library, but quite well-polished in terms of styling. 

7. Smartour.js #

Smartour.js is another super simple open-source library for product tours, except that this one is built with TypeScript and JavaScript. As far as we can tell, it also has a more limited styling option through CSS. 

8. Tooltip Sequence #

Tooltip Sequence is exactly as it says. It enables you to build a sequence of tooltips. Other than the fact that it’s your run-of-the-mill JavaScript open library for product tours, it needs Hugo to run the dev server. So if that’s not your cup of tea, look elsewhere.

9. Webtour.js #

Webtour.js is one of the more robust product tour open libraries out there. It comes with basic product tour building features, but it also has several advanced functionalities such as highlighting elements, dynamic element targeting, and keyboard control. 

10. Tourguide.js #

Lastly, there is Tourguide.js . It is a lightweight alternative to other JavaScript libraries that rely on JQuery. It’s clean, it’s nice, and it gets the job done. 

These are our 10 suggestions for you if you’re looking for product tour open libraries. And if you’re thinking, “well, these all seem quite similar” , you would be correct, since there seems to be an agreed-upon format that they usually follow. But any number of these can be an adequate option if you have a super simple product that needs an onboarding tour. 

Don’t know how to code? Need something more robust? You’ve got options #

Coding is hard, and it’s not for everyone. Or maybe you are a coding wizard, but you just don’t want to waste much time on building and maintaining user onboarding tours yourself. Don't know for certain? See this table that summarizes the benefits of building vs buying.

So instead, use a no-code tool 😉 Chameleon provides a robust product tour builder that allows you to create fully customizable and highly targeted onboarding flows. It also integrates with your favorite tools and offers so much more. If you’re looking for something better than just a sequence of dialogs, then you need a dedicated product adoption platform. 

👉 Check out this interactive demo of building a Tour with Chameleon, no code needed.

Try our no-code builder for in-product experiences

Save time and money by building user experiences all without any dev resources required.

You might also be interested in...

User Onboarding Metrics, KPIs, and Benchmarks: A Comprehensive Guide

User onboarding still isn't good enough, but here's how it's changing, mobile user onboarding: the ultimate guide for 2023, boost product adoption and reduce churn.

Get started free in our sandbox or book a personalized call with our product experts

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

🚶 A lightweight, easy-to-use JavaScript library to create interactive, customizable, accessible guided tours across your websites or web apps!

williamtroup/Journey.js

Folders and files, repository files navigation.

🚶 A lightweight, easy-to-use JavaScript library to create interactive, customizable, accessible guided tours across your websites or web apps! v1.5.1

What features does Journey.js have?

• Zero-dependencies and extremely lightweight!
• Full API available via public functions.
• Fully styled in CSS/SASS and compatible with the Bootstrap library.
• Full CSS theme support (using :root variables, with a default dark-mode theme).
• Custom triggers for actions (when the dialog is shown for an element, or hidden, etc).
• Shortcut keys (click here to see the full list).
• Browser URL parameters support (click here to see the full list).
• Hints support (not included in the main journey).
• 51 language translations available!
• Customizable tooltips.
• Show progress dots, or a progress bar, or both!

Where can I find the documentation?

All the documentation can be found here :

What browsers are supported?

All modern browsers (such as Google Chrome, FireFox, and Opera) are fully supported.

What languages are supported?

• af Afrikaans
• hy Armenian
• be Belarusian
• bg Bulgarian
• zh Chinese (simplified)
• en English (default)
• eo Esperanto
• et Estonian
• gl Galician
• ka Georgian
• hu Hungarian
• is Icelandic
• id Indonesian
• ja Japanese
• lt Lithuanian
• lb Luxembourgish
• no Norwegian
• pt Portuguese
• ro Romanian
• si Sinhalese
• sl Slovenian
• zh-tw Taiwanese
• uk Ukrainian

What are the most recent changes?

To see a list of all the most recent changes, click here .

How do I install Journey.js?

You can install the library with npm into your local modules directory using the following command:

Or, you can download the latest zipped up version here .

How do I get started?

To get started using Journey.js, do the following steps:

1. Prerequisites:

Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows:

2. Include Files:

3. dom element binding:.

To see a list of all the available binding options you can use for "data-journey-js", click here .

To see a list of all the available custom triggers you can use for "data-journey-js", click here .

4. Finishing Up:

To start the journey, call the following public function:

That's it! Nice and simple. Please refer to the code if you need more help (fully documented).

How do I go about customizing Journey.js?

To customize, and get more out of Journey.js, please read through the following documentation.

1. Public Functions:

To see a list of all the public functions available, click here .

2. Configuration:

Configuration options allow you to customize how Journey.js will function. You can set them as follows:

To see a list of all the available configuration options you can use, click here .

To see a list of all the available configuration option custom triggers you can use, click here .

Code of conduct

Security policy, releases 20, sponsor this project.

• https://www.paypal.com/donate/?business=5ZA6ULEBTHTA4&no_recurring=0&item_name=Help+keep+me+fueled+for+the+development%2C+and+management%2C+of+Journey.js%21&currency_code=GBP
• JavaScript 62.4%

InfoQ Software Architects' Newsletter

A monthly overview of things you need to know as an architect or aspiring architects.

View an example

We protect your privacy.

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

• English edition
• Chinese edition
• Japanese edition
• French edition

Back to login

Login with:

Don't have an infoq account, helpful links.

• About InfoQ
• InfoQ Editors
• Write for InfoQ
• About C4Media

Choose your language

Discover new ideas and insights from senior practitioners driving change in software. Attend in-person.

Discover transformative insights to level up your software development decisions. Register now with early bird tickets.

Get practical advice from senior developers to navigate your current dev challenges. Register now with early bird tickets.

Level up your software skills by uncovering the emerging trends you should focus on. Register now.

InfoQ Homepage News Shepherd JavaScript Library: Guided User Tours of Your Application

Shepherd JavaScript Library: Guided User Tours of Your Application

This item in japanese

Feb 28, 2022 1 min read

InfoQ Articles Contest

Shepherd is a JavaScript library that provides a simple interface for creating guided user journeys in web applications. It's framework-agnostic, easy to use, and works great on desktop and mobile applications alike.

Guided user journeys or product tours are a popular way to onboard new users and help existing users to discover new functionality in applications.

To start a new guided tour using Shaperd, install the library using npm/yarn or grab it directly from the CDN provided in the installation guide and then initialize the tour and add the desired steps to the tour following the example below.

In this example, we add two custom properties during initialization.

useModalOverlay creates a backdrop behind the tour modal and the target element, which makes it much more readable.

scrollTo tells Shepherd to scroll the target element into view when the step is shown.

Once the tour is initialized, the developer adds the individual steps through the addSteps method, passing in an array of steps.

Finally, tour.start() will kick the tour off. Developers should consider adding a setTimeout to avoid triggering the tour immediately.  Developers should also track which guided tours have been displayed to the user in order to avoid displaying them again on every visit.

The defaults used by Shepherd do not take advantage of the library capabilities, and developers are advised to read the full tutorial and API documentation in order to make the most out of the library.

It's worth noting that under the hood, Sheperd uses Floating UI, formally called Popper.js , a tooltip and popover positioning engine that ensures the dialog windows always remain visible and properly positioned.

While developers can use Shepherd out of the box with any framework, there are many user-maintained libraries to ease the integration (such as React Shepherd ). Developers can find links to popular integration in the Shepherd Github repository .

Shepherd source code can be found at the official repository on Github and is provided under the MIT license .

Developers are encouraged to participate in developing and maintaining Shepherd by following the contributing guide .

About the Author

Rate this article, this content is in the web development topic, related topics:.

• Development
• JavaScript Libraries
• Web Development
• Dynamic Languages

Related Editorial

Related sponsored content, popular across infoq, will c++ become a safe language like rust and others, infoq software architecture and design trends report - april 2024, infoq architecture and design trends in 2024, qcon london: meta used monolithic architecture to ship threads in only five months, architecture does not emerge - a conversation with tracy bannon, microsoft azure introduces retina: a cloud native container networking observability platform, related content, the infoq newsletter.

A round-up of last week’s content on InfoQ sent out every Tuesday. Join a community of over 250,000 senior developers. View an example

Define the tour steps and focus elements.

Data attribute method

TourGuide JS will scan the DOM for elements with the [data-tg-tour] attribute.

The "data-tg-tour" attribute should contain the relevant content for the tour guide step. For example:

Additional attributes are supported:

• data-tg-title : Title to show for step
• data-tg-group : Group for different tours on the same page
• data-tg-order : The order of the step
• data-tg-fixed : If the element is fixed on scroll
• data-tg-margin : Auto scroll margin from screen edge

<div data-tg-tour="Welcome to the tour"

data-tg-title="Get started"

data-tg-group="my-first-tour"

data-tg-scroll-margin="0"

data-tg-fixed

> ... </div>

TourStep Array method

Steps can also be defined in an object format. This allows for more control and customization.

content: string

title?: string

target?: HTMLElement | Element | HTMLInputElement | string | undefined

order?: number

group?: string

When when working with object defined steps they must be contained in an array. If steps are not contained in array & debug is enabled in options a console warning will be displayed.

tg.addSteps( [ {

// step data..

The target property

While other elements of the TourStep object are straight forwards, the target supports multiple types.

• undefined or element not found : The tour dialog will be centered on screen.
• string : Find element using document.querySelector()
• HTMLElement | Element | HTMLInputElement : JS element

Defining steps on Tour Guide creation.

const steps = [{

content: "This is a short guide to get you set up and show you where things are"

title: "Welcome aboard 👋"

const tg = new TourGuideClient({

steps: steps

To add steps programmatically use addSteps() .

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Using the Driver.js library to guide user focus

A crucial aspect of modern web development is communicating your message to users quickly and clearly. If you offer a product or service, you need to guide new users efficiently so they can swiftly become comfortable using your interface.

No matter how good your products or services are, if users can’t grasp their purpose and how to use them, this poor UX could negatively impact your business.

A popular example of user guidance is providing some kind of product tour to highlight the main features and capabilities of a UI in a simple and straightforward way. Driver.js is a small and compact vanilla JavaScript library that provides an easy way to add such a tour to your site or app.

In this tutorial, we’ll explore Driver.js and demonstrate how to use the library in an example web app that incorporates its main features.

To see the working example of what we’re going to create, check out the Driver.js tour example on CodePen . Let’s get started.

What is Driver.js?

Driver.js is a highly customizable and multipurpose library written in TypeScript. You can use this library for product and feature tours as well as any scenario where you need to guide the user’s focus. Some of its technical features include:

• Extremely lightweight, only 5kB gzipped
• Accessible and user-friendly — users can navigate using their keyboards
• No limit to how many elements you can highlight on a page
• Vanilla JavaScript with no dependencies
• Can be used with any frontend framework
• Works on all major browsers and mobile devices

In short, Driver.js is a simple, powerful, and flexible library for driving the user’s focus in any way you want or need.

Practical use cases for Driver.js

You can use this library in a variety of scenarios where driving and guiding the user focus is key. Here are some ideas for practical Driver.js use cases:

• Highlight a video player
• Preview an image by dimming the rest of the page
• Provide contextual help — for example, when the user is filling out a form
• Show a Welcome or About message for your app
• Highlight the new features of your app
• Provide a “zen mode” that dims all distracting UI elements

There are not many limitations when it comes to Driver.js. The library’s API provides complete control over its popover component execution.

There may be some use cases where specific Vue or React versions would help developers integrate Driver.js with their apps, but right now, this option is not in the library’s roadmap.

However, you can actually use Driver.js in any frontend framework. It’s just going to cost you a few more lines of code.

There are many ways you can leverage Driver.js in your app. Let’s go through a demo project now to see some of them in action.

Setting up an example Driver.js project

In this section, we’ll incorporate Driver.js features in a dashboard project. We’ll use Driver.js to set up contextual help when the user clicks into the search bar and create a feature tour for the dashboard’s components.

Over 200k developers use LogRocket to create better digital experiences

To keep the focus on Driver.js, instead of setting up a new dashboard, we’re going to modify an existing dashboard project that looks like the image below:

Let’s start by creating an HTML file in a directory of your choice. Name the file driver-tour-example.html or whatever else you’d like to name it. Then, put the following content inside the file:

This is the markup for the dashboard design from the image above. Now let’s add the following in the <head> section of your file:

This loads the necessary JavaScript and CSS files for Driver.js as well as the Tailwind CSS library used in the dashboard design. Now we’re ready to start working with Driver.js.

Creating a contextual highlight with Driver.js

In this section, we’ll add a contextual highlight popover element that displays when the user focuses — or clicks — on the search bar. Add the following code before the closing <body> tag:

In the code above, we first declare the driver object. Next, we create an instance of the driver object. Then, we select the search input by its ID and attach a focus event listener to the search input. This will ensure that when the search input is in focus, the Driver.js code will execute.

Here, we use the highlight method, which is meant for when we need to highlight only one element. It represents a drive step with two properties:

• element — The target element to highlight. It can be a CSS selector or an HTML element
• popover — The Driver.js UI element that highlights the target element and shows the content for the highlighted step, which in our case would be instructions for the search input

The popover has many configuration options listed in the Driver.js docs . Here, we use the description property to add content for the step and side property to specify which side we want to display the popover on. In our case, bottom is the most appropriate side for our design.

Note that for the popover’s content, we can use HTML as well as plain text.

Next, we attach a blur event listener so that when the search input is not in focus anymore, we call the destroy() method to destroy the driver object instance.

In the driver object instance declaration we created before, we use the onDestroyed() hook to remove the focus from the search input when the driver is destroyed.

In the image below, you can see the result when we click on the search input:

Creating a feature tour with Driver.js

In the last section, we saw how to use Driver.js to highlight a single element. Now, we’ll explore how to create a tour with multiple driver steps to highlight various different elements.

We want to provide users with explanation of each element’s purpose on our dashboard. To do so, add the following code in the <script> tag. This code should go after the code we added earlier to highlight the search bar when it’s in focus:

To create a multi-step tour, we create another instance of the driver object and use the steps property to define the tour’s steps. Each step takes the exact same configuration properties as the single step from the previous example.

We use ID selectors to select all the elements we want to highlight. Note that these IDs are already in the markup we copied earlier, so we don’t have to add them to the HTML file now. However, if you’re using Driver.js in your own project, you’ll need to add them on your own.

This time, in the popover configuration, we also add title and description options. However, we don’t use the side property because we don’t need it. Driver.js will set the most appropriate side automatically if the side option is omitted or if it’s present but not appropriate.

Finally, we use the drive() method to start the tour. Here are some screenshots of the tour steps.

Explaining how to navigate using the sidebar:

Demonstrating the notification feature:

Defining dashboard elements:

Now we have a fully functional tour for our dashboard app.

This is great, but what if we want to create a customized tour with our own design? Well, this is completely possible with Driver.js. Let’s see how we can do it in the next section.

Customizing the Driver.js popover configuration

Driver.js offers some configuration options you can use to change the appearance of the popover and the overlay. Let’s try some of them.

Copy the properties above steps in the code below and add them to the tour object in your file:

The first three properties change the display text for the Next , Previous , and Done buttons shown in the popover component.

The overlayColor property sets the color of the dimmed area when an element is highlighted.

The next two properties instruct the driver that the progress of steps should be shown and how its text should be formatted.

Now, if you reload the page, you should see how the tour looks with our modifications. Here’s the first step:

And here’s the last step:

Great! It already looks cool with our customizations, but let’s go further and completely change its appearance by adding some styles.

Styling the Driver.js popover

Driver.js allows you to theme the popover as you like. By using some of the library’s predefined popover classes, we can change every part of the popover.

Add a style tag in your file with the following content:

Here, we add a solid green border to the popover. We also change the color, width, and margin of the popover arrow to match the border color and size.

Here is the result:

Looks great! Let’s finish the popover transformation by adding custom fonts and some additional styling.

First, add the following links in your files to add the Cabin Sketch and Klee One Google Fonts:

Now we can use them in our stylesheet. Add the following in the <style> tag:

In the code above, we made the title and description text a bit bigger and set the desired Google Font for each one.

Next, we made the color of the close button red. We also added a bit of padding to the top as well as a tiny, light gray top border to the popover footer to visually separate the popover text from the progress text.

Finally, we changed the color of the progress text to match the overlay color.

Here is the final appearance of the popover:

It looks way better than its default version, doesn’t it? You can easily change the style to suit your personal preference or brand scheme.

Here you can see the final result in action:

See the Pen Driver.js Tour Example by Ivaylo Gerchev ( @codeknack ) on CodePen .

For a better experience, view the final project on CodePen to interact with it directly in fullscreen mode.

In this tutorial, we explored Driver.js and learned how to use some of its capabilities in a demo dashboard project. We built a feature tour for the dashboard and added a contextual popup to the search bar to help guide users.

Although this library is simple and easy to use, it can do way more than you’d expect at first glance. You can check out the Driver.js documentation to explore its advanced capabilities and see some more example projects for inspiration as you consider ways to add it to your own project.

LogRocket : Debug JavaScript errors more easily by understanding the context

Debugging code is always a tedious task. But the more you understand your errors, the easier it is to fix them.

LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to see exactly what the user did that led to an error.

LogRocket records console logs, page load times, stack traces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

Try it for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)
• #vanilla javascript

Stop guessing about your digital experience with LogRocket

Recent posts:.

The lasting negative effects of confirmshaming

Confirmshaming targets users’ emotions, increasing the likelihood they’ll give in to pressure — but it has numerous negative effects.

Leader Spotlight: Removing opinions about what to build, with Keith Agabob

Keith Agabib shares examples of creating business cases from research, data, and consumer insights to remove opinions around what to build.

A guide to people management

People management refers to the task of managing, overseeing, and optimizing employees to drive a team towards achieving its goals.

Using AWS Lambda and CloudFront to optimize image handling

Leverage services like AWS Lambda, CloudFront, and S3 to handle images more effectively, optimizing performance and providing a better UX.

Leave a Reply Cancel reply

• Advertise with us
• Explore by categories
• Free Online Developer Tools
• Privacy Policy
• Comment Policy

Top 10: Best Tour (website guide) Javascript and jQuery plugins

Carlos Delgado

• January 02, 2019

See our compilation from 10 of the best Tour Javascript and jQuery plugins to create a web guide for your user

Have you ever visited a website or a web application, where you don't have the most remote idea of how to start to using it because it's your first time there and you just feel like Jhon Travolta?

If you're a web developer, you may want to avoid this experience from your user creating some type of guide video, or a well explained documentation. However, some users won't read the documentation or see a video because there is no time for that, they just want to use your app! For this kind of users (that's the 90% of the people) you can use a dynamic in web tour while they learn to use your app. You can implement this feature by using a Guided Tour plugin in your app.

In this top, we are going to share with you 10 of the best guided tour plugins made in VanillaJS and jQuery.

Anno is a step-by-step guides plugin for powerful web apps. Anno.js is built to be extensible , the source is about 500 lines of literate coffeescript; you can read the annotated source in just a few minutes.

9. jQuery guide

jQuery Guide is a jQuery plugin made to create a "How to use guide" for your web app. It uses jQuery animations to provide a smooth and nice experience for the user while they learn how to use your app.

8. aSimpleTour

aSimpleTour is a jQuery plugin that will help you to make website tours easily.

7. Pageguide

Pageguide is a plugin to create interactive guide for web page elements using jQuery and CSS3. 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. Pageguide comes with an example implementation (the files are in /example) which you can run locally with Grunt.

6. Bootstro.js

Bootstro show your users a guided tour of what is what on a page. Especially, for first-time users. Bootstro requires bootstrap & bootstrap popover , just add the class .bootstro to any element that you'd like to be highlighted, then include bootstro.js &  bootstro.css and start using Javascript bootstro.start() .

Any element anywhere on the page can be intro'ed: popovers are automatically scrolled to so they always get focused. This plugins is easily customizable, Bootstro provides various public methods so you can control as you like bootstro.start() , bootstro.next() , bootstro.prev() .

5. Hopscotch

Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress. Hopscotch supports internationalization via i18n object in tour config. The default language is English. If you need a tour in a language other than English, pass in translated text in your tour config. Text used for previous, next, skip, done and close buttons, as well as, tour step numbers can be translated.

A Hopscotch tour consists of a tour id, an array of tour steps defined as JSON objects, and a number of tour-specific options. The tour id is simply a unique identifier string. The simplest tour consists of just an id string and an array of one or more steps. This plugin has been created by the guys at LinkedIn .

4. Enjoyhint

A free web-tool that is created to guide users through a site or app in the simplest way. It gives an excellent way to create interactive tutorials with hints and tips, and embed them into your web apps, thus, enhancing their usability and value/effectiveness. EnjoyHint adds simple hints that prompt users to navigate a website or an app intuitively and easily. It comes along with instant auto-focus highlighting, as the user moves into a new field.

We demonstrated the use of the EnjoyHint web-tool in an issue tracker demo, created with Webix JavaScript UI library. The tool itself is based on Javascript, HTML5 and CSS. The tool works on the client-side and can be used with any server-side platform. The key features of EnjoyHint:

• Fast web-tool setup
• Simple initialization and configuration
• Interactive hints - instant tips that provide a description to the user about the field they are in
• Scenario of coherent actions - allows adding a sequence of hints for all necessary steps
• Auto-focus highlighting - involves automatic focus on the area related to the hint and its instant hightlighting when the hint loads
• Defining shape - defining the shape and margin of the highlighted area
• Timeout settings - allows setting the delay before the moment, when the element is highlighted
• Hint resume that restarts the display of hints from the step where it was stopped
• Auto scrolling to the highlighted element at different animation speed.
• Cross-browser support (Chrome, FireFox, IE10+, Safari)
• Support for Android, iOS and Windows touch sceens (laptops and tablets)

3. Intro.js

Intro.js is a Step-by-step guide and feature introduction plugin for your website. When new users visit your website or product you should demonstrate your product features using a 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. Intro.js is developed to enable web and mobile developers to create a step-by-step introduction easily.

Intro.js has no dependencies, fast and small 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped), besides it works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer.

2. Shepherd

Shepherd is a javascript library for guiding users through your app. It uses Tether, another open source library, to position all of its steps. Tether makes sure your steps never end up off screen or cropped by an overflow. Try resizing your browser to see what we mean.

Shepherd works in IE9+ and all modern browsers.

1. Bootstrap Tour

Bootstrap Tour is a plugin to make an animated, dynamic guided tour through your website using the famous Bootstrap Framework, however, if you don't use Boostrap you can use the standalone version without problem. This plugins is the easiest way to show people how to use your website with Bootstrap Popovers.

Honorable mentions

Driver.js is a light-weight, no-dependency, vanilla JavaScript engine to drive the user's focus across the page. Driver is compatible with all the major browsers and can be used for any of your overlay needs. Feature introductions, focus shifters, call-to-action are just a few examples.

If you know another awesome Tour plugin to show a website to your user or you're developing your own tour plugin, don't be shy and share it with the community in the comment box.

Senior Software Engineer at Software Medico . Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.

Related Articles

Top 10 : Best autocomplete jQuery and javascript plugins

• July 05, 2016
• 155.5K views

Top 10 : Best notification libraries and plugins for Javascript and jQuery

• February 20, 2016
• 196.4K views

Top 10 : Gallery and photo viewer plugins for javascript and jQuery

• February 21, 2016
• 67.3K views

Top 5 : Best javascript and jQuery tooltip plugins

• March 19, 2016

Top 5: Best javascript video background plugins

• August 10, 2016
• 27.4K views

Top 10: Best slide sidebar menu (drawer) javascript and jQuery plugins

• December 15, 2016
• 152.5K views

Advertising

All Rights Reserved © 2015 - 2024

Browsers support

Documentation.

API documentation

Contributing

We encourage contributions of all kinds. If you would like to contribute in some way, please review our guidelines for contributing .

MIT License

Projects Using Shepherd

Here we showcase some of the awesome libraries built using Shepherd.

JS Framework Wrappers

Ember-shepherd.

Ember addon for the site tour library Shepherd

angular-shepherd

An Angular wrapper for the site tour library Shepherd

react-shepherd

A React wrapper for the site tour library Shepherd

vue-shepherd

A Vue wrapper for the site tour library Shepherd

Rails engine that generates and tracks Shepherd tours within an application

Websites and Apps

Simpleplanner.

SimplePlanner uses Shepherd to help new users get familiar with its collaborative scheduling approach. You do need to sign up via OAuth or email to see the scheduling tour. Check out the Envato Tuts+ Startup Series on its codebase which describes how Simple Planner was built.

Brokermate uses Shepherd to guide users through initial setup steps.

Snapsure uses Shepherd to help photographers learn how to set up alerts for their desired picture-perfect weather conditions.

The Drupal CMS uses Shepherd to offer tours of it's core modules, and allows developers to add Tours to their custom and contributed modules.

Budibase Shepherd Tour Plugin

Budibase is an open source application which allows you develop low code applications rapidly and efficiently.This Budibase Shepherd tour plugin allows you to create interative walkthroughs for your application.

Your Project Here

If you have a cool open-source library built on Shepherd, PR this doc.

You are using an outdated browser. Please upgrade your browser to improve your experience.

This page requires JavaScript to work properly. Please enable JavaScript in your browser.

665 Keep Ave Elgin, IL 60120

• Preplanned tours
• Daytrips out of Moscow
• Themed tours
• Customized tours
• St. Petersburg

Moscow Metro

The Moscow Metro Tour is included in most guided tours’ itineraries. Opened in 1935, under Stalin’s regime, the metro was not only meant to solve transport problems, but also was hailed as “a people’s palace”. Every station you will see during your Moscow metro tour looks like a palace room. There are bright paintings, mosaics, stained glass, bronze statues… Our Moscow metro tour includes the most impressive stations best architects and designers worked at - Ploshchad Revolutsii, Mayakovskaya, Komsomolskaya, Kievskaya, Novoslobodskaya and some others.

What is the kremlin in russia?

The guide will not only help you navigate the metro, but will also provide you with fascinating background tales for the images you see and a history of each station.

And there some stories to be told during the Moscow metro tour! The deepest station - Park Pobedy - is 84 metres under the ground with the world longest escalator of 140 meters. Parts of the so-called Metro-2, a secret strategic system of underground tunnels, was used for its construction.

During the Second World War the metro itself became a strategic asset: it was turned into the city's biggest bomb-shelter and one of the stations even became a library. 217 children were born here in 1941-1942! The metro is the most effective means of transport in the capital.

There are almost 200 stations 196 at the moment and trains run every 90 seconds! The guide of your Moscow metro tour can explain to you how to buy tickets and find your way if you plan to get around by yourself.

Moscow Metro Tour - With Ratings

• Moscow Tours
• Sightseeing Tours

Moscow Metro Tour

• See more images

Tour Information

Key Details

• Free Cancellation
• Duration: 1 Hr 30 Mins
• Language: English
• Departure Details : Get to the Biblioteka imeni Lenina (Lenin's Library, Red Line) or Alexandrovsky Sad (Alexander Garden, Light Blue Line) metro station. Use any exit. Find the Kutafia Tower of the Kremlin. The guide .. read more

The Moscow Metro has a long history to it. Also, the city has an extremely beautiful subway. It is very well maintained and is also extremely decorated. Each station and spot has a different artistic aspect to it. On this tour, experience the efficiency of Moscow Metro.

• Roam around the Revolution Square, with magnificent sculptures of the Soviet people
• Visit the Kurskaya Station Lobby, the Hall of Fame of the WWII
• Be awestruck at the Komsomolskaya , with impressive mural mosaics of Russian glorious victories
• See the artistic side of Novoslobodskaya , with the stained glass, although under the ground.

Know More about this tour

Take our Moscow Metro Tour and discover why our subway is recognized as the most beautiful in the world!

"They used to have palaces for kings, we are going to build palaces for the people!" said one of the main architects of the Soviet subway.

With us you will see the most beautiful metro stations in Moscow built under Stalin: Komsomolskaya, Revolution square, Novoslobodskaya, Mayakovskaya. Our guide will tell fascinating stories and secrets hidden underground, urban legends and funny stories.

How many babies were born on the Moscow metro? Where is the secret Metro 2? How deep is the Moscow metro? And where did Stalin give his speech in November 1941? Join out Metro tour and find out!

• Metro ticket

Cancellation Policy

• If you cancel between 0 hrs To 24 hrs before scheduled tour departure, the cancellation charge will be 100%
• If you cancel between 1 days To 180 days before scheduled tour departure, the cancellation charge will be 0%
• Please note that in case of No show, the cancellation charge will be 100% of the listed tour fare.
• Please note tours booked using discount coupon codes will be non refundable.
• Culture & Theme Based Tours
• Food & Nightlife Tours
• Outdoor & Nature Tours
• Aerial Tours
• Adventure & Sports
• Tickets & Passes
• Transfers & Transportation
• Holiday & Seasonal Tours
• Luxury & Special Occasions Tours
• Shore Excursions
• Weddings & Honeymoons Tours
• Day Trips & Excursions
• Multi Day & Extended Tours
• Private & Custom Tours
• Shopping & Fashion
• Walking & Biking Tours
• What to do in Moscow
• Best time of year to visit Moscow
• How to reach Moscow
• Restaurants in Moscow
• City Map of Moscow
• Moscow Itineraries
• Moscow Hotels
• Itinerary Planner

Responsive Guided App Tour In JavaScript – shepherd

Description:

shepherd is a JavaScript library that creates an interactive, accessible, dynamic visual guide to let your users learn about new features and functions on your web app.

Full responsive, user-friendly and mobile compatible.

• 10 Best Guided Tour JavaScript Plugins For Your App

How to use it:

Install the package.

Import the shepherd module.

Or import the shepherd.js into the document.

Create a new tour.

Add steps to the tour.

Start the tour.

All default tour options.

All default step options.

Tour’s API.

Step’s API.

v12.0.0 (03/08/2024)

• Move files from src/js to src, convert to TS
• Drop support for node < 18
• Add Pro events sharing

v11.2.0 (09/03/2023)

• Prevent ESC, KEY_RIGHT, KEY_LEFT propagation when keyboardNav is enabled

v11.1.1 (04/04/2023)

v11.1.0 (04/03/2023)

• add funtion support for confirmCancel
• prevent to show spurious warnings in dev panel consol

v11.0.1 (12/13/2022)

v11.0.0 (11/22/2022)

• Replace popperJS with Floating UI
• Exporting StepOptionsButton type to be able to add tour steps buttons dynamically with type checking
• feat: add ability to specify corner radius

v10.0.1 (08/01/2022)

v10.0.0 (06/06/2022)

• Implement lazy evaluation of attachTo.element
• Fix chrome opacity bug

v9.1.1 (05/25/2022)

• Fixed showOn incorrectly skipping an index

v9.1.0 (04/09/2022)

• Add dynamic text and label properties for buttons

v9.0.0 (01/11/2022)

• Drop node 10 support
• Fix type signature for Evented.off()

v8.3.1 (05/07/2021)

• Add preventOverflow option for tether to false

v8.3.0 (04/06/2021)

• Updated package

v8.2.3 (03/26/2021)

v8.2.1 (03/24/2021)

v8.2.0 (03/03/2021)

• Remove shepherd-target-click-disabled class on step hide
• Bug Fix: properly handle centered modal

v8.1.0 (10/05/2020)

• Add stepsContainer option, allowing users to specify rendering target for step elements
• Add missing types for Step.options and Tour.steps
• Added default fallback for target when step is hidden/destroyed
• shift + tab handled

v8.0.2 (07/10/2020)

v8.0.0 (05/26/2020)

• Officially drop IE 11 and remove from browserslist
• Require attachTo.on to show arrow

v7.2.1 (05/14/2020)

v7.1.6 (05/12/2020)

• Add deepmerge for deep clone functionality

v7.1.5 (04/28/2020)

• Refactor popper options

v7.1.4 (04/24/2020)

• Fixed Layout error when has popperOptions

v7.1.3 (04/23/2020)

• Fix defaultStepOptions.popperOptions issues

v7.1.2 (04/19/2020)

v7.1.1 (04/14/2020)

• Add new function for creating modals when needed and cleanup

v7.1.0 (03/28/2020)

v7.0.4 (03/08/2020)

• Single argument on classList.add for IE11 compatibility

v7.0.2 (03/06/2020)

• Fix bug when modifiers was not defined

v7.0.1 (02/25/2020)

• Bugfixes and update.

v6.0.2 (11/09/2019)

• Fix dynamic shepherd classes interfering with tether classes

v6.0.1 (11/07/2019)

v6.0.0 stable (10/30/2019)

• Dynamically update text while in tour
• Add fade-in animation to tether
• Fixed Step arrow not attaching correctly.
• Remove pinned arrows
• Update transitions on shepherd element
• Removed unnecessary parenthetical commas

v6.0.2beta (10/22/2019)

v6.0.0 (10/04/2019)

• Fixed Can’t get shepherdElementZIndex to work

v5.0.1 (08/29/2019)

• Fixed Pass shepherdElementZIndex to tippy as zIndex

v5.0.0 (08/26/2019)

• fixed: ionic element – bubbles not pointing to right place due to clientHeight = 0
• added: Vue.js wrapper

v5.0.0beta2 (08/23/2019)

• showCancelLink -> cancelIcon
• Remove link styles
• Remove Shepherd.Evented
• Types don’t support activeTour or Evented properties.
• Remove object-assign-deep, refactor setting popper options
• Use requestAnimationFrame to position modal opening
• Add overlayOpacity to styleVariables options
• Add keyboardNav and exitOnEsc options
• Move activeTour to namespace
• Fixed advanceOn click doesn’t work on nested elements
• Fixed Use currentTarget for advanceOn
• adding alt and role to img element
• fixing a11y issue by adding lang attribute to html element

v4.6.0 (08/10/2019)

• Wrong type definition for scrollTo
• Fade in modal overlay
• Fix for the wrong type definition of StepOptions.scrollTo

v4.5.0 (08/09/2019)

• Support passing elements for text

v4.4.1 (08/08/2019)

• Use objectAssignDeep to deeply merge tippyOptions

v4.4.0 (08/07/2019)

• Fixed Shepherd.Tour constructor definition of steps errors with showOn being undefined

v4.3.4 (08/05/2019)

• Add addSteps method and allow passing steps to tour constructor

v4.3.3 (08/03/2019)

v4.3.0 (08/02/2019)

• Add option to specify container element for the modal
• Fix cancel link color for when the header has dark background
• Fix content border radius
• Fix applying tippyOptions

v4.2.0 (08/01/2019)

• Remove shepherdElementWidth option

v4.1.0 (07/31/2019)

• Make cancel link more accessible

v4.0.0 stable (07/30/2019)

• major update

v4.0.0beta15 (07/27/2019)

• Switch modals from ids to classes and prefix them

v4.0.0beta14 (07/27/2019)

• Simplify addStep API

v4.0.0beta13 (07/27/2019)

• Remove predefined themes
• Fixed: ommiting ‘on’ doesn’t work
• Fixed: Modal mask opening shows back up on scroll

v4.0.0beta12 (07/27/2019)

• Add first class support for secondary button
• Fixed for IE 11

v4.0.0beta10 (07/21/2019)

• Use autoBind, pass context rather than manually binding
• Polyfill all usage with core-js
• Remove drop util
• Start fixing IE11 support

v4.0.0beta2 (07/14/2019)

• Remove array support for step.options.text
• Cleanup public/private API

v4.0.0beta (07/03/2019)

• .shepherd-popper -> .shepherd, move .shepherd-has-title
• Remove remaining lodash, IE 11+
• Remove the string option for advanceOn in favor of object
• Remove string option for attachTo in favor of object
• Fixed bugs: useModalOverlay does not play well with multiple instances on the page

v3.1.0 (06/25/2019)

• Fix jumpy disableScroll
• Reuse existing modal overlay

v3.0.0 (06/24/2019)

• Remove ul, li button wrapper
• Support to keyboard navigation
• Add disableScroll option
• Add aria-describedby and aria-labeledby
• Add focus trap, to disallow tabbing outside the modal
• Support close with ESC, focus tooltip on show

v2.10.0 (06/14/2019)

• Add scrollIntoView options and polyfill
• Add TypeScript definitions

You Might Be Interested In:

Leave a reply cancel reply.