How to Create Multi-Step Tour Using Elementor Tooltips Addon

When you’re designing a website, making sure visitors stay interested is really important. That’s where Elementor Tooltips Addon comes in. This guide is all about showing you how to create interactive tours on your WordPress website. These tours use little helpful boxes called tooltips to guide visitors through different parts of your site.

Now, let’s get into the exciting part Multi-Step Tours. Imagine having a friendly guide that takes you around your website, showing you different things like pictures and text in a step-by-step way. We make this happen by using pre-made designs from Premium Templates or Elementor saved templates as tooltips.


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.

Create the Tooltips for your widgets

  • Step 1: Navigate to your Elementor element settings -> Content tab -> Global Tootips tab then enable it.
  • Step 2: Set Content option to Elementor Template.
  • Step 3: Select the Elementor template you want to show for the current tooltip.
  • Step 4: Add a class in CSS Navigator Selector field that starts with “tooltip-“. For example “tooltip-2″. This class will be used in the content of the other templates to open to this tooltip.
Elementor Global Tooltip addon using Multi-step tour option
  • Step 5: “First Step in The Tour?” option should be enabled for the first tooltip in the tour so it can be opened on the frontend on page load.
  • Step 6:  Navigate to the template you want to be next in the multi-step tour, you can add a trigger to move to the next tooltip, To specify this trigger, the user needs to add the tooltip CSS navigation selector “tooltip-2” in the CSS Class and update.
Tooltips addon's Elementor template linked by CSS Class
  • Step 7: To add a close button at the end of the tour, you can assign this class to any element “premium-tooltipster-closer”
Closer Tooltip's Elementor template CSS class added

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 YoutTube channel to get updates about new features, improvements, and bug fixes.

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.