The Tooltip extension in Atomic Addons allows you to add helpful tooltip messages to different Elementor elements without requiring any coding. It helps provide additional information, descriptions, or guidance when visitors interact with specific elements such as buttons, icons, images, and widgets. With customizable positioning, styling, and display options, you can create clear and engaging tooltips that improve usability and user experience. This documentation will guide you through how to use and configure the Tooltip extension in Atomic Addons.
Enable the Tooltip Extension #
To use the Tooltip Extension from Atomic Addons, first, you have to enable the extension.
- Go to WordPress dashboard → Atomic Addons Plugin dashboard.
- Then, click on the Elementor Tab and the sub items will open.
- Then, Click the Extensions Tab.
- Search for the Tooltip Extension.
- Enable the Tooltip Extension.
- Hit the Save Settings Button.
Primary Setup for Tooltip Extension #
Before using the Tooltip extension, you first need to create or select an existing design where you want to apply the effect. This will help you better visualize and customize the glass-style appearance within your layout.
Place to Find the Tooltip Extension #
As you will use the Tooltip Extension, you need to create a design first where you want to use the Tooltip extension. After that follow the below steps –
1. To find the Tooltip Extension, you must need to select an element where you want to use the tooltip.
2. After that, move to the Advanced Tab of the element.
3. Here, below the layout section you will find the Tooltip extension section.
Using the Tooltip Extension #
In this section we have two more tabs. These are Settings and Style. Let’s start with the Settings Tab first –
1. Use Tooltip: Enable the switcher to use the tooltip to your selected design.
2. Description: You can add and make changes to the tooltip text in this field.
3. Placement: You can set the position of the tooltip text with this option.
4. Follow Cursor: Enable the switcher to move the tooltip with the cursor with this option.
5. Animation: You can set the animation of the tooltip appearance with this option.
6. Trigger: You can set the option by which the tooltip will trigger. You can choose between hover, click and custom trigger.
7. Trigger: By selecting the trigger type as Custom trigger you will get another option.
8. Custom Trigger: You need to add the class id to use the tooltip as Custom trigger.
9. X Offset: You can move the tooltip horizontally from its original position — positive values move it to the right, and negative values move it to the left with this option.
10. Y Offset: You can move the tooltip vertically from its original position – positive values move it to the up, and negative values move it to the down with this option.
11. Arrow: You can enable the switcher to get arrow on the tooltip description.
Now, let’s proceed to the Style Tab –
1. Max Width: You can set the width of the tooltip text with this option.
2. Text Color: You can make changes to the text color with this option.
3. Background Type: You can choose the background type to be classic or gradient with this option. Here, we have selected the background type as Classic.
4. Color: You can change the background color with this option.
5. Image: You can change the background image with this option.
6. Arrow Color: You can change the arrow color with this option.
7. Padding: You can adjust the inner space of the tooltip field with this option.
8. Border Type: You can add and change the border type with this option.
9. Border Radius: You can control the roundness of the border with this option.
10. Text Alignment: You can set the tooltip content position to left, center or right with this option.
11. Box Shadow: You can add a shadow effect to the tooltip field with this option.
12. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
All done, You have successfully customized the Tooltip Extension on your website.
Video Tutorial #
You can also watch the video tutorial to learn more about the Tooltip Effects extension.
Thanks for being with us.