The Tooltip extension in Wow Elements Pro allows you to display informative and interactive tooltip content on your website elements without any coding. It helps improve user experience by showing additional text, descriptions, or helpful information when users hover over specific sections, icons, buttons, or widgets. With flexible customization controls and stylish tooltip designs, you can easily create engaging and user-friendly interactions for your Elementor website. In this documentation, we will guide you through how to use and customize the Tooltip extension in Wow Elements Pro.
Enable the Tooltip Extension #
To use the Tooltip Extension from Wow Elements Pro, first, you have to enable the extension.
- Go to WordPress dashboard → Wow Elements Plugin dashboard.
- Then, Click the Extension Tab.
- Search the Tooltip Extension Name.
- Enable the Tooltip Extension.
- Hit the Save Settings Button.
Where 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.
Configuring 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 Assist #
You can also watch the tutorial video about the Tooltip Extension. Please visit the demo page for examples.
Thanks for staying with us.
