Advanced Tooltip

How to use Advanced Tooltip features of Sky Addons for WordPress

Sky Addons Advanced Tooltip Extensions enhances user interaction by adding customizable tooltips to any Elementor widget with powerful positioning and styling options. Perfect for providing additional information, explanations, or context without cluttering your design. This feature-rich module gives you complete control over tooltip appearance, animation, and behavior.

Key Features

1. Flexible Placement Options – Position tooltips in 15 places around elements
2. Customizable Animations – Choose from 14 eye-catching animation effects
3. Interactive Tooltips – Allow users to hover and click inside tooltips without dismissing them
4. Follow Cursor Option – Make tooltips follow the user’s mouse movement
5. Custom Triggers – Display tooltips on hover or click events
6. Extensive Styling Controls – Customize colors, typography, borders, shadows, and more

Activate Advanced Tooltip

To enable the powerful Advanced Tooltip functionality in your Elementor site:

1. Navigate to your WordPress Dashboard and locate “Sky Addons” in the left sidebar menu
2. Click on the “Extensions” tab within the Sky Addons dashboard area
3. Find the “Advanced Tooltip” option in the extensions list
4. Toggle the switch to the “On” position to activate this feature
5. Make sure that your changes are saved.

Once activated, you’ll be able to add tooltips to any Elementor widget through the Advanced tab in the element editor.

Insert Advanced Tooltip Extensions

1. Open Elementor Editor. Edit any widget where you want to add a tooltip.
2. Go to the “Advanced” tab in the Elementor panel.
3. Find the “Advanced Tooltip” section and enable it.

The Advanced Tooltip section appears on the Advanced tab of every widget. It does not appear on containers, so to add a tooltip to a group of elements, put it on the main widget inside the group. The section has two tabs: Settings and Style. In this Step Flow example, the Content field uses a little HTML to show a name in bold and a job title below it.

Settings Section

This section provides all the configuration options for your tooltip:

1. Enable – Activate the tooltip functionality for the selected element.
2. Content – Add your tooltip text or HTML content.
3. Placement – Choose where the tooltip appears: top, right, bottom or left, each with start and end variations, or Auto, Auto-start and Auto-end. Top is the default.
4. Offset – Control the distance between tooltip and element with X/Y coordinates.
5. Delay – Set custom show/hide delays for smoother user experience.
6. Follow Cursor – Make tooltip follow the mouse cursor movement.
7. Show Arrow – Display a directional arrow pointing to the trigger element.
8. Animation – Select from various animation styles like fade, shift, scale, perspective.
9. Animation Duration – Control how long tooltip animations take to complete.
10. Hide On Click – Configure tooltip hiding behavior when clicked. Choose Yes (the default), No or Toggle.
11. Interactive – Allow users to interact with content inside the tooltip.
12. Trigger – Choose Hover (the default) or Click to activate the tooltip.
13. Custom Trigger Elements – Target specific elements to trigger the tooltip using CSS selectors.

This demo has one button for each of the 15 placements. The visitor is pointing at the Right button, so its tooltip opens to the right with the arrow pointing back at the button.

Style Customization

Completely customize the appearance of your tooltips with comprehensive styling options:

1. Max Width – Control the maximum width of your tooltip.
2. Alignment – Align tooltip text (left, center, right, justify).
3. Text Color – Customize the tooltip text color.
4. Background – Apply solid colors or gradients to your tooltip background.
5. Padding – Control internal spacing within the tooltip.
6. Border – Add and style borders around your tooltip.
7. Border Radius – Create rounded corners for your tooltip.
8. Typography – Control font family, size, weight, and more.
9. Text Shadow – Add depth to your tooltip text.
10. Box Shadow – Create shadow effects for the entire tooltip.
11. Arrow Color – Customize the color of the tooltip’s directional arrow.

Here is the Step Flow tooltip on the live page. It opens above the image, shows the name and job title, and has an arrow because Show Arrow is on.

Save and Preview

1. Once you’ve customized and styled your tooltip, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the tooltip looks and functions as desired.

Troubleshooting

1. Tooltip Not Appearing – Check if the “Enable” option is activated and ensure your content isn’t empty.
2. Positioning Issues – Try different placement options or adjust the offset values for better positioning.
3. Interactive Mode Not Working – Ensure your tooltip size is large enough and try increasing the animation duration.
4. Custom Triggers Not Working – Verify your CSS selectors are correct and the targeted elements exist on the page.
5. Animation Appears Choppy – Adjust the animation duration settings for smoother transitions.

Frequently Asked Questions

Is Advanced Tooltip free?

No. Advanced Tooltip is a Sky Addons Pro extension.

Can I put links or images inside a tooltip?

Yes. The Content field accepts HTML. Turn on Interactive? so visitors can move the mouse into the tooltip and click a link without the tooltip closing.

How do I show a tooltip on click instead of hover?

Set Trigger to Click. This works better on touch screens, where there is no hover.

Related Extensions

• Floating Effects: add gentle motion to any widget.
• Wrapper Link: make a whole widget or container clickable.

Conclusion

The Advanced Tooltip extensions is a powerful addition to your Elementor toolkit, allowing you to enhance user experience by providing contextual information in an elegant way. With its extensive customization options, you can create tooltips that perfectly match your website’s design while improving usability and engagement.

If you have any questions or encounter any challenges while using, please don’t hesitate to reach out to our dedicated support team at https://wowdevs.com/support/ where our expert team is ready to provide prompt and helpful assistance.