Tooltip For Divi Modules is a Divi Essential extension that adds fully customizable tooltip popups to any Divi section. When a visitor hovers over (or clicks) the section, a styled tooltip appears with your custom text — configurable in position, animation, color, typography, spacing, and more.
All settings appear in the Design tab of Divi Sections under the Tooltip group.
⚠️ This is an Extension, not a module. Tooltip For Divi Modules does not appear in the Divi Builder module list. It adds a Tooltip settings group to the Design tab of Divi Sections.
How to Enable
Step 1: Go to WordPress Admin → Divi Essential → Extensions
Step 2: Find Tooltip For Divi Modules and toggle it On
Step 3: Open any Divi Section in the Divi Builder
Step 4: Go to the Design tab → Tooltip section
Step 5: Toggle Enable Tooltip on and configure your settings
Step 6: Click Save — the tooltip goes live on the front-end
Settings Reference
Enable Tooltip
Type: Toggle Default: Off
Activates the tooltip on the section. All other Tooltip settings become visible once this is enabled.
Tooltip Text
Type: Textarea Default: Empty
The text content displayed inside the tooltip. Supports plain text. Shown exactly as written when the tooltip is triggered.
💡 Keep tooltip text short and scannable — 5 to 15 words is the ideal range. Long text breaks the visual rhythm of a tooltip and may overflow the Max Width boundary.
Position
Type: Dropdown Default: Top
Controls where the tooltip appears relative to the section it is attached to:
| Option | Description |
|---|---|
| Top | Tooltip appears above the element (default) |
| Bottom | Tooltip appears below the element |
| Left | Tooltip appears to the left of the element |
| Right | Tooltip appears to the right of the element |
Trigger
Type: Dropdown Default: Hover
Controls what visitor action causes the tooltip to appear:
| Option | Description |
|---|---|
| Hover | Tooltip appears when the cursor moves over the section (default) |
| Click | Tooltip appears when the visitor clicks the section |
Animation
Type: Dropdown Default: Fade
Controls the entrance animation of the tooltip when it appears:
| Option | Description |
|---|---|
| Fade | Tooltip fades in smoothly (default) |
| Slide | Tooltip slides in from the direction of Position |
| Scale | Tooltip scales up from a small point |
| None | Tooltip appears instantly with no animation |
Background Color
Type: Color Picker + Opacity Default: #1E293B at 100%
Sets the background color of the tooltip bubble. The default is a dark navy — works well on most site backgrounds. Adjust opacity for a semi-transparent tooltip effect.
Font Size
Type: Slider Unit: px Default: 13px
Controls the size of the tooltip text. Keep between 11–14px for a standard tooltip feel — larger sizes start to feel more like a popover than a tooltip.
Font Color
Type: Color Picker + Opacity Default: #FFFFFF at 100%
Sets the color of the tooltip text. White on the default dark background provides strong contrast. Always ensure sufficient contrast between Font Color and Background Color for readability.
Padding Vertical
Type: Slider Unit: px Default: 6px
Controls the top and bottom padding inside the tooltip bubble. Increase for a more spacious, card-like feel. Keep low (4–8px) for a compact tooltip.
Padding Horizontal
Type: Slider Unit: px Default: 12px
Controls the left and right padding inside the tooltip bubble. Works in tandem with Padding Vertical to define the overall internal spacing of the tooltip.
Max Width
Type: Slider Unit: px Default: 250px
Sets the maximum width of the tooltip bubble. Text wraps within this boundary. Increase for longer tooltip text; decrease for short single-line tips.
| Range | Best For |
|---|---|
| 100–150px | Single-word or very short labels |
| 200–250px (default) | Standard tooltip text — 1–2 short sentences |
| 300–400px | Longer descriptive tooltips |
Border Radius
Type: Slider Unit: px Default: 6px
Controls how rounded the corners of the tooltip bubble are. At 6px the corners are subtly rounded — matching most modern UI styles. Increase for pill-shaped tooltips; set to 0px for sharp rectangular corners.
Border Width
Type: Slider Unit: px Default: 0px
Sets the width of the border around the tooltip bubble. At 0px no border is shown. Increase to add a visible outline — useful when using a light or transparent Background Color to define the tooltip boundary.
Show Arrow
Type: Toggle Default: On
When enabled, a small directional arrow is drawn on the edge of the tooltip pointing toward the element it belongs to — reinforcing the visual connection between tooltip and target. Disable for a floating label style with no pointer.
Tooltip Box Shadow
Type: Box Shadow Builder
Adds a drop shadow to the tooltip bubble. Configure shadow offset (X and Y), blur radius, spread, and color. Box shadows add depth and help the tooltip stand out against complex or busy backgrounds.
Quick Reference
| Setting | Default | Unit | Notes |
|---|---|---|---|
| Enable Tooltip | Off | Toggle | Master toggle |
| Tooltip Text | Empty | Textarea | Keep 5–15 words for best results |
| Position | Top | Dropdown | Top / Bottom / Left / Right |
| Trigger | Hover | Dropdown | Hover or Click |
| Animation | Fade | Dropdown | Fade / Slide / Scale / None |
| Background Color | #1E293B |
Color + Opacity | Dark navy default |
| Font Size | 13px | px | Recommended: 11–14px |
| Font Color | #FFFFFF |
Color + Opacity | White on dark default |
| Padding Vertical | 6px | px | Top & bottom inner spacing |
| Padding Horizontal | 12px | px | Left & right inner spacing |
| Max Width | 250px | px | Text wraps at this boundary |
| Border Radius | 6px | px | Corner rounding |
| Border Width | 0px | px | No border by default |
| Show Arrow | On | Toggle | Directional pointer to element |
| Tooltip Box Shadow | — | Shadow Builder | Depth and separation |
Tips & Best Practices
01 — Keep tooltip text short Tooltips are designed for supplementary context — not full explanations. Aim for 5 to 15 words. If you need more text, consider a modal or an expandable section instead.
02 — Use Position: Top for most cases Top is the default and the most universally readable position. Use Bottom for elements near the top of the page where a tooltip above would be clipped. Use Left or Right only when vertical space is constrained.
03 — Keep Show Arrow enabled The arrow creates a clear visual connection between the tooltip and the element it describes. Disabling it can make the tooltip feel disconnected — like it is floating in the wrong place.
04 — Ensure sufficient color contrast The default #1E293B background with #FFFFFF text provides strong contrast. If you change either color, always verify that the contrast ratio is at least 4.5:1 for WCAG AA compliance and basic readability.
05 — Use Click trigger for touch-friendly sections Hover triggers do not work reliably on touch devices — mobile users cannot hover. If your section targets mobile visitors, set Trigger to Click for a reliable touch interaction.
06 — Add a Box Shadow for busy backgrounds On sections with images, gradients, or particle effects as the background, a subtle box shadow on the tooltip (e.g. 0px 4px 12px rgba(0,0,0,0.2)) makes it stand out clearly from the background noise.
07 — Use Border Width with light Background Colors If you switch to a light or semi-transparent tooltip background, add a Border Width of 1–2px with a subtle border color to define the tooltip boundary — otherwise the edges can disappear into a light page background.
FAQ
Q: Does Tooltip For Divi Modules work on Rows and Modules, or only Sections?
A: The Tooltip settings panel appears in the Section Design tab — it applies at the section level.
Q: Can I use HTML inside the Tooltip Text field?
A: The Tooltip Text field accepts plain text. HTML tags are not rendered inside the tooltip bubble.
Q: Will the tooltip appear on mobile?
A: On touch devices, Hover trigger tooltips may not behave reliably since touch screens do not register hover events. Set Trigger to Click for consistent mobile behavior.
Q: Can I have different tooltips on different sections on the same page?
A: Yes — each section has its own independent Tooltip settings. Different sections can have different text, positions, triggers, colors, and animations.
Q: Does the arrow direction change automatically based on Position?
A: Yes — when Show Arrow is enabled, the arrow automatically points in the direction of the target element based on the Position setting. A Top tooltip shows a downward arrow; a Bottom tooltip shows an upward arrow.
Q: Does the tooltip affect the section's layout or content?
A: No. The tooltip is a visual overlay — it does not affect the section layout, content, or any other modules inside the section.