Interaction extension · Pro
Add an Elementor tooltip to any Elementor 4 element in a few clicks. Write one line, pick a position and an entrance animation, and style it to match your design. No code, no extra element.
The short answer
Advanced Tooltip is an Animation Addons for Elementor extension that adds an Elementor tooltip to Elementor 4 atomic elements. You switch it on in the element's panel, write the tooltip text, choose a Hover or Click trigger, one of four positions and one of ten entrance animations, then style the box and its arrow without code.
| Plan | Pro Animation Addons Pro. The panel section is part of the free plugin, but tooltips only appear on the live page with a licensed Animation Addons Pro |
|---|---|
| Type | Interaction extension: adds a panel section to elements you already use |
| Works on | Elementor 4 core atomic elements (Heading, Paragraph, Button, Image, SVG, Flexbox, Div Block, Grid) and Animation Addons atomic widgets such as Button, Button Pro, Icon List, Counter, Flip Box, Image Hotspot and Form |
| Main controls | Enable Tooltip, Tooltip Text, Position, Animation, Trigger, Offset, Show Delay (ms), Hide Delay (ms) |
| Style controls | Alignment, Width, Padding, Enable Arrow, Arrow Size, Background, Color, Font Size, Line Height, Border |
| Per breakpoint | Enable Tooltip, Alignment, Padding, Enable Arrow, Font Size, Line Height, Border |
| Editor preview | Off by default. Switch on Enable in Editor to see the tooltip on the canvas; a play button replays the entrance |
| Limits | Plain text from a text area (no images or buttons inside); one tooltip per element; four fixed positions |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Every demo uses Advanced Tooltip from Animation Addons Pro on Elementor 4's own elements. The settings on each card are a good place to start.
A three-column pricing table with small "i" icons beside plan features. Hovering an icon brings up a dark tooltip with an arrow.
A grid of team portraits. Hovering a face shows a role line to the right in a light, bordered card.
Round "V", "GF" and "N" badges beside each dish. Tapping a badge opens a short explanation below it.
Grey client logos; hovering one reveals the project name in a small dark label.
Key terms sit on their own line as short headings. Hovering a term shows a wide definition with a soft glow.
A muted "Enrol now" button. Hovering it types out the opening date.
Features
Every point below is a real control in the Advanced Tooltip panel section or part of how it works. Nothing here needs custom code.
Animation offers Spring Pop, Slide & Fade, Typewriter, Flip Card, Magnetic, Blur Focus, Clip Reveal, Jelly Skew, Glow Pulse and Unfold Stack: quiet for forms, lively for promos.
Show Delay (ms) stops tooltips firing as the cursor sweeps past; Hide Delay (ms) leaves time to finish reading.
Position, Offset, Width and Alignment set where the tooltip sits and how longer text wraps.
Background, Color, Font Size, Line Height, Padding and Border (radius included) style the box. Enable Arrow adds a pointer sized with Arrow Size.
Step by step
Six steps from switching it on to publishing. The bold names are the exact labels you will see on screen.
Get Animation Addons ProInstall Animation Addons for Elementor and activate Animation Addons Pro, then check that Advance Tooltip is on under Animation Addon > Settings > Extensions.
Open the page in the Elementor 4 editor and select the element that should show the tooltip, such as a Button, an Image, an SVG icon or a Heading.
In the element's panel, open the Advance Tooltip section and switch on Enable Tooltip.
Type the message in Tooltip Text, then choose Trigger, Position and Animation.
Set Background, Color, Padding and Enable Arrow, and switch on Enable in Editor to see it on the canvas.
Publish and test on a phone; use Trigger Click or switch Enable Tooltip off on mobile.
Honest comparison
Elementor 4's atomic Heading, Button and Image have no tooltip setting. The closest built-in option is a title attribute added through Attributes, which the browser shows as a plain tooltip.
| Feature | Browser title attribute (via Attributes) | Animation Addons Advanced Tooltip |
|---|---|---|
| Styling | Browser default, cannot be styled | Background, color, font size, line height, padding, border, arrow |
| Position | Decided by the browser | Top, Bottom, Left or Right, with Offset |
| Trigger | Hover only | Hover or Click, with show and hide delays |
| Entrance animation | None | 10 options |
| Per-breakpoint on/off | No | Yes |
| Cost | Free in Elementor | Animation Addons Pro |
Compared with Elementor 4.3.3 (September 2026).
A title attribute suits a one-word hint. Choose Advanced Tooltip when the tooltip is part of the design or must work on tap.
Who it's for
The people who get the most out of it, and what they use it for.
Explaining plan details without a longer pricing table.
Adding useful detail to team pages and logo walls.
Needing tappable notes on badges and buttons.
Defining terms inside articles.
FAQ
In Elementor 4, install Animation Addons for Elementor and activate Animation Addons Pro. Select the element, open its Advance Tooltip section and switch on Enable Tooltip. Write the text in Tooltip Text, then choose Hover or Click, a position and an animation. Advanced Tooltip works on Elementor's core atomic elements and on Animation Addons atomic widgets.
Yes. Advanced Tooltip in Animation Addons has a Trigger control with two options, Hover and Click. Click is the better choice for badges, icons and anything visitors use on a phone, because touch screens have no real hover. You can also switch Enable Tooltip off on the mobile breakpoint if the tooltip is not needed there.
Hover depends on a mouse, so for phones Animation Addons recommends the Click trigger on Advanced Tooltip. Enable Tooltip, padding, font size, line height, border and the arrow can be set per breakpoint, so a tooltip can be larger on mobile or switched off there. Test on a real device.
Animation Addons Advanced Tooltip shows plain text from Tooltip Text, so it holds a sentence or two, not images or buttons; use Image Hotspot or a Popup for those. Each element gets one tooltip in one of four positions. Tooltips play on the live site only with a licensed Animation Addons Pro, and show on the editor canvas only when Enable in Editor is on.
Advanced Tooltip adds no extra widget to your layout; it reads settings on the element you already have, and its styles come from a small dedicated stylesheet. Animation Addons Pro also includes Lazy Animation and a Performance Wizard for sites with many animated pages, and Advance Tooltip can be switched off site-wide from the Extensions screen.
Treat Advanced Tooltip text in Animation Addons as a helpful extra, not the only place important information lives. Put prices, terms and anything a buyer must know in visible text and use the tooltip to explain it, so visitors who never hover, screen-reader users and search engines still get the essentials.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
What works well with Advanced Tooltip on the same page or template.
Styled hover and click tooltips on Elementor 4 elements, with 10 entrance animations. Need something free right now? A title attribute in Elementor's Attributes gives a plain browser tooltip.
