Add Interactive Tooltips Anywhere in Divi
Divi Tooltip lets you add modern hover tooltips to text, buttons, images, icons, and modules across your Divi website. No custom code required.
Three steps to interactive tooltips.
From inside the Divi builder. No code, no plugins-on-plugins.
Open Any Divi Module
Buttons, text, icons, images — every module supports the tooltip layer.
Enable Tooltip Settings
Toggle tooltips on inside the Design tab. Choose content and behavior.
Customize and Publish
Style position, trigger, animation and content. Save and you're done.
Everything you need to explain anything.
Each feature ships with sensible defaults — and total control if you want it.
Rich Tooltip Content
Mix images, icons, headlines and CTAs inside a single tooltip.
Position Controls
Top, bottom, left or right — pick the direction that fits your layout.
Trigger Options
Hover, click, or focus — match your visitors' interaction patterns.
Style Customization
Background, shadow, typography, spacing — every detail is yours to tune.
Animation Effects
Fade, scale, slide — choose the motion that matches your brand.
Responsive Support
Tooltips intelligently adapt their position, size and trigger to every device.
Every Divi Element Can Explain Itself.
Divi Tooltip adds modern interactive tooltip experiences to buttons, text, images, and modules directly from the Divi builder.
Tooltip Anywhere
Add tooltips to buttons, headings, images, icons, dividers — anywhere your visitors might pause.
Full Design Control
Colors, shadows, typography, spacing, animations — match your brand without writing a line of CSS.
Zero Custom Code
No HTML snippets, no JavaScript hacks, no shortcodes. Everything lives in the Divi visual builder.
Built for the obsessive details.
Power-user controls hidden behind a beautifully simple interface.
A directional preview that always points the right way.
Snap tooltips to any of the four primary directions. Smart edge-detection automatically flips position when the tooltip would clip off-screen.
- ✓ Top, bottom, left, right anchors
- ✓ Auto-flip on viewport edge
- ✓ Offset control in pixels
More than a one-line label.
Tooltips can host an image, a title, a paragraph, and a call-to-action — turning hover micro-moments into mini conversion experiences.
- ✓ Inline images and icons
- ✓ Headline + body text
- ✓ Embedded CTA buttons
Lives right inside the Divi Design tab.
No separate modal, no external dashboard. Tooltip settings appear contextually as another panel — exactly where Divi users expect them.
- ✓ Native Design tab integration
- ✓ Per-module configuration
- ✓ Reusable presets and global styles
Hover, click, or focus — choose what fits the moment.
Some tooltips should appear instantly. Others should wait for intent. Pick the right behavior per element, every time.
- ✓ Hover for ambient discovery
- ✓ Click for explicit reveal
- ✓ Focus for keyboard accessibility
On Hover
Instant reveal on cursor entry
On Click
User-triggered reveal
25,000+ builders. 4.9 average rating.
"Divi Tooltip turned out to be the missing layer in our agency workflow. We use it on every client site now — for buttons, icons, and product tooltips. Couldn't ship without it."
"The rich tooltip is what sold us. Being able to embed an image and a CTA inside a tooltip means we can explain features without bloating our pages. Conversion-friendly."
"Plug and play. Zero custom code. The position engine handles edge cases I would have spent hours debugging. Divi Essential is essential — pun intended."
Every Divi Tooltip capability,
in one toggle.
Divi Tooltip is one feature inside Divi Essential — a complete toolkit with 22+ extensions for the Divi builder.
All 22+ Extensions
One plugin. Divi Tooltip, animated gradients, scroll effects, cursor effects, and more — all in a single lightweight package.
How to Use Divi Tooltip Extension
in 3 Simple Steps
From zero to interactive tooltip in under a minute — entirely inside the Divi visual builder. No code, no plugins-on-plugins.
Open Divi Builder
Open the Divi Builder and select the section where you want to add a tooltip.
Enable Tooltip
Go to the Design tab, open the Tooltip settings, and turn on Enable Tooltip.
Customize and Save
Add your Tooltip Text, choose a position, set background and text colors, adjust font size, enable or disable the arrow, choose an animation, and save.
Answers, before you ask.
21 more reasons to install Divi Essential.
Tooltip is just the start. Here's a taste of what's bundled inside.
Turn every hover into a
moment of clarity.
Drop in Divi Essential and start adding contextual tooltips, animations, and hover experiences across your entire site.
Get started with Divi Essential30-day money-back guarantee · Instant download
