V4 Extentions Advanced-Tooltip Estimated reading: 4 minutes 52 views Show a short helpful message when visitors hover over or click an element. Turn it on, type your text, done. No code needed. WORKS ON Any V4 element TRIGGER Hover or Click ANIMATIONS 10 styles BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS Pro Tip: Install and activate both Animation Addons plugins before you start. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab. Under Interaction Extensions, turn on Advance Tooltip. Click Save Settings. Advance Tooltip Extension 1 (click to zoom) STEP 2 Add a Tooltip Now add a tooltip to any element in the Elementor editor. Open your page with the Elementor Editor. Select any V4 element, for example a Button. In the General tab, open the Advance Tooltip section. Turn on Enable Tooltip. Write your message in Tooltip Text. Advance Tooltip Extension 2 (click to zoom) That is all. Your tooltip is ready. SETTINGS Content Settings These settings control what the tooltip says and how it behaves. Advance Tooltip Extension 3 (click to zoom) Tooltip Text The message visitors will see. Keep it short and clear. Example: Free shipping on orders over $50 Position Default: TopChoose where the tooltip opens: Top, Bottom, Left or Right of the element. Animation Default: Slide & FadeChoose how the tooltip appears. View all 10 animations AnimationHow it looksSpring PopBounces in with a springSlide & FadeSlides in and fadesTypewriterLetters appear one by oneFlip CardFlips open in 3DMagneticFollows your mouse over the elementBlur FocusStarts blurry, then becomes sharpClip RevealWipes in from left to rightJelly SkewSquash and stretch effectGlow PulseFades in, then glows softlyUnfold StackUnfolds from top to bottom Trigger Default: HoverHover shows the tooltip when the mouse is over the element. Click shows it when the element is clicked. A click tooltip closes when you click outside or press Esc. Tip: Use Click for touch devices, where hover is not available. Offset Default: 10pxThe gap between the element and the tooltip, in pixels. Set it higher for more space. Show Delay and Hide Delay Default: 0 msTime in milliseconds before the tooltip appears or disappears. 1000 ms = 1 second. Enable in Editor Default: OffTurn this on to preview the tooltip inside the Elementor editor. SETTINGS Style Settings These settings control how the tooltip looks. Advance Tooltip Extension 4 (click to zoom) Alignment Default: CenterAlign the tooltip text to Left, Center or Right. Width Default: 200pxSet the tooltip width. If your text wraps into too many lines, increase the width. Padding Default: 8px 12pxSpace inside the tooltip, top and bottom, then left and right. Enable Arrow and Arrow Size Default: OffTurn on Enable Arrow to show a small arrow pointing to the element. Then use Arrow Size to make it bigger or smaller. Arrow Size appears only when the arrow is on. Background and Color Default: #000000Background is the tooltip color and Color is the text color. Note: The default text color is dark green. On a dark background, change it to white (#ffffff). Font Size and Line Height Default: 14px / 1.5Control the text size and the space between lines. Border Default radius: 8pxAdd a border and set its width, color and radius. Radius controls how round the corners are. TRY THIS Quick Recipe Not sure where to start? Use these values for a clean dark tooltip. POSITION Top ANIMATION Slide & Fade TRIGGER Hover OFFSET 10 ARROW On BG COLOR #1f2937 TEXT COLOR #ffffff WIDTH 200px NEED HELP? Troubleshooting I do not see the Advance Tooltip section in the editor Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) and turn on Advance Tooltip. Then reload the editor. The section works on V4 (Atomic) elements only. The tooltip does not show on my live page Make sure Enable Tooltip is on for that element, the page is saved, and Animation Addons Pro is active. Clear your site cache if you use a cache plugin. The tooltip does not open on my phone Phones have no hover. Change Trigger to Click, then tap the element to open the tooltip. You Did It Your element now shows a tooltip with your own text, position, animation and style. If you face any problem, please contact our support team. We are happy to help.
