How to Add Tooltips to Elements in JupiterX

Welcome to our guide on incorporating tooltips in JupiterX. Tooltips are a fantastic way to offer additional information or explanations to your website visitors without cluttering your design. They appear when users hover over an element, providing them with useful data in a simple yet effective manner. Below are the steps and options for customizing tooltips in JupiterX using Elementor.

Getting Started

Once you are in the Elementor editor:

• Drag any Elementor widget onto your page (note that this option is unavailable for containers and sections).
• Click on the widget to edit it.
• Go to the "Advanced" tab on the panel.
• Scroll down to find "Tooltips" and turn on the toggle to enable tooltips for this specific widget.

Content Options for Tooltips

Here, you can customize the content and behavior of your tooltip:

• Description: Type in the text for your tooltip. You have both visual and text editors to format your content.
• Placement: Select where you want the tooltip to appear around the element ('Top', 'Right', 'Bottom', 'Left', and variations of these positions).
• Use Arrow?: Choose whether to include an arrow pointing to the element.
• Animation: Pick the animation style ('Fade', 'Shift-Away', 'Shift-Toward', 'Scale', 'Perspective').
• Trigger: Decide what action will show the tooltip ('Mouse Enter', 'Click', 'Focus', and their combinations).
• Delay: Set how long the tooltip should wait to appear after the trigger event.
• Offset, Distance, Z-Index: Fine-tune the tooltip's position and layering on the page.
• Custom Selector: For advanced customization, use custom CSS selectors to target the tooltip.

Styling Your Tooltip

Adjust the appearance of your tooltip in the following ways:

• Width: Define the tooltip's width.
• Typography: Customize the text's appearance, including font, size, weight, and spacing.
• Text Color: Select a color for the text in the tooltip.
• Text Alignment: Choose how the text should be aligned within the tooltip.
• Background Type: Choose a solid color or a gradient for the background.
• Arrow Color: If using an arrow, pick its color.
• Padding: Set the space around the text inside the tooltip.
• Border Type, Border Radius: Style the border and round the tooltip's edges.
• Box Shadow: Add a shadow effect for more depth.

By following these steps, you can create an engaging and informative tooltip that complements your site’s design. Utilize this feature to improve user experience and ensure your website visitors have all the information they need at their fingertips.

If you have any questions or need further assistance, please feel free to reach out to our support team. We are always here to help you make the most out of your JupiterX experience!