Elementor Global Tooltips Addon Tutorial

This tutorial shows how to use Elementor Global Tooltips Addon by Premium Addons. The innovative way to guide users through your WordPress Elementor-based website’s content.

Elevate user engagement with interactive tooltips that provide context on hover. With the Elementor Global Tooltips Addon, you can go even further by adding icons, Lottie animations, text, or Elementor templates as tooltips for any Elementor element. Learn how to enrich your website’s user experience with this powerful addition.

Unveiling the Power of Elementor Global Tooltips Addon on the demo page.

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Premium Addons Pro is required for:
  • Tooltip Type: Gallery and Elementor Template
  • Mouse Follow option.
• Also, make sure that this feature is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

• CSS Selector.
• Content.
• Style.
• Settings.

How to Add Tooltips on Elementor Elements?

Elementor Global Tooltips Addon can be applied to any Elementor content by navigating to Content tab in Elementor elements, widgets, and columns then scrolling down to Premium Global Tooltips tab.

You can add Tooltip on Elementor elements using Premium Global Tooltips Addon under Content tab in widget settings.

Content

Please note that Gallery, Elementor Template Tooltips Types requires Premium Addons PRO installed and activated on your website.

In Elementor Global Tooltips Addon, the tips can be Text, Gallery, Lottie, or Elementor Templates.

• Text: Insert text to be shown in Tooltips.
  • Content Text
  • Add Icon
• Gallery: Select the photos to be in the Tooltip Gallery.
• Lottie Animations
  • Animation JSON URL.
  • Loop.
  • Reverse.

• Elementor Template
  • Elementor template: Select from your saved templates.
  • CSS Navigation Selector: Add the CSS selector to be used in Global Tooltips tour.
  • First Step in The Tour: Enable to have Global Tooltips tour. (the steps related to the tooltips tour in this doc)
• Hide Tooltip On: Select the platforms you want to hide it on.

Style

Text

• Text Color: Pick colors for the Tooltips text.
• Typography: Adjust the Tooltips text font settings and style it.
• Text Shadow: Adjust Tooltips text-shadow:
  • Color
  • Blur
  • Horizontal Position
  • Vertical Position

Gallery

• Size: Set the size of the Tooltips.
• Image Fit: Select the image fit between cover, fill, or contain.

Lottie

• Size: Set the size of the Tooltips.

Container

• Box Shadow: Add a shadow around the container. Select the color and the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position: Outline or Inset
• Background Type: Pick the background for the container.
  • Classic Background: Color or Image background.
  • Gradient Background: Set the background using gradient colors.
• Border Type: Customize border settings for the container.
• Border Radius: Add a radius for the border corner for the container.
• Padding: Creates space around the container, inside of any defined borders.
• Margin: Creates a space around the container, outside of any defined borders.

Settings

Please note that Mouse Follow requires Premium Addons PRO installed and activated on your website.

• Mouse Follow: Enable to make the tooltips to follow the mouse.
• Interactive: Enable to give users the possibility to interact with the content of the tooltip.
• Show Arrow: Enable to show arrow under the tooltips.
• Trigger: Select the trigger to be on click or by mouse hover.
• Position: Select the ToolTips position to be on the top, bottom, right, and left.
• Spacing: Set the spacing between the tooltip and the origin.
• Min Width: Set the minimum width of the tooltip.
• Height: Set the height of the tooltip.
• Animation: You may select the animation of the tooltip between fade, grow, swing, slide, or fall.
• Delay: Set the delay of the animation in seconds.
• Z-index: Set the Z-index of the tooltip.

Conclusion

In summary, Elementor Global Tooltips Addon by Premium Addons revolutionizes WordPress web design. Its seamless integration of interactive tooltips across all Elementor widgets and columns enhances user guidance and engagement. By harnessing the power of tooltips, you can create a dynamic, informative, and captivating user experience that sets your website apart. Embrace this innovative tool to stay at the forefront of web design trends and take your WordPress site to new heights.

We hope we were able to help you through this guide. Check out the rest of the Global Features in Premium Addons.

Also, You can check out the rest of our Section & Columns Addons like:

• Elementor Lottie Animation Section Addon
• Elementor Ken Burns Section Addon
• Elementor Animated Gradients Section Addon
• Elementor Parallax Section Addon
• Elementor Animated Blob Generator Section Addon

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.