How to Create Multi-Step Tour Using Elementor Tooltips Addon

Elementor Tooltips addon for Elementor makes it easy to keep people excited and show them how to use your website. You can make tooltip-based step-by-step tours that help people find their way around your site with Premium Addons PRO.

You need to use the CSS navigation class or filter to show each message in the right place. You can make sure everything works well by giving each tooltip its own class, like tooltip-1, tooltip-2, etc.

Now we can move on to the fun part: Multi-Step Tours would be great if your website had a friendly guide that showed you different things, like pictures and writing, step by step. In order to do this, we use tooltips with ready-made designs from Premium Templates or Elementor saved templates.

Check this video tutorial for more detailed steps.

Benefits of Multi-Step Tours

• Simplify Navigation: Show new users how to get to the most important parts of your website.
• Enhance User Experience: Improve the user experience by introducing features in a way that is visually appealing.
• Boost Engagement & Conversions: Interactive elements encourage users to take action.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Make sure to enable Global Tooltips from your WordPress dashboard by navigating to Premium Addons -> Global features.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Step 1: Enable Tooltips for Your Elementor Widgets

1. Pick out the element you want to add a message to in Elementor Editor.
2. Open the Global Tooltips tab from the Content tab and turn it on.
3. Change the Content setting to Elementor Template.
4. Pick out an Elementor Template to show in the menu.
5. Give it a CSS class that starts with tooltip-, from Global Tooltips tab -> Content -> CSS Navigation Selector then add the tooltip CSS Selector like tooltip-1.

This feature allows you to navigate to the tooltip by adding the same class from the widget settings under the Advanced tab -> CSS Classes. Important: The class name must begin with ‘tooltip-‘.

Step 2: Set Up the Multi-Step Tour

1. Set the First Tooltip to Open on Page Load
   • Turn on “First Step in The Tour?” in the first tooltip’s settings.
2. Connect the next tooltip
   • This is the CSS class for the next tooltip: tooltip-2.
     • Keep in mind that there should be an element (like a button) after the first tooltip that has the same class as the next one, (e.g., tooltip-3, tooltip-4, etc.). This creates a linked sequence of tooltips.
   • Save the changes.
3. Keep adding steps.
   • Do this for each step to make sure the tooltips are linked properly.

Step 3: Add a Button to Close It

• Give any part of the end tooltip the class premium-tooltipster-closer to add a close button.

Use Cases in the Real World

• Online shops should show their customers how to find items, get deals, and buy them.
• Sites that let people become members should show new users how to use their homepage.
• For service-based businesses, show clients how to make meetings or fill out forms to get in touch.
• Take online classes: Show the kids how to move around the course in a way that they can understand.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help!

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.