The Tooltip module adds a floating popup panel - a hint, label, or mini-card - that appears next to another element when a visitor hovers over it, clicks it, or when the page loads.
Because a tooltip always points at something, you place it as a child of the element it describes (that parent element becomes the tooltip's anchor).
The module is a nestable container, so the popup can hold plain rich text, other modules, or both. This article walks through adding a Tooltip and every setting on its Content, Design, and Advanced tabs.
How the Tooltip module works
A tooltip is a standalone block you drop anywhere. It attaches to a parent element and floats beside it:
The anchor is the parent element (a button, image, text, icon, or any module) the tooltip points at.
The Tooltip module is added as a child of that anchor and holds the popup content.
By default the popup shows on hover, sits outside top center of the anchor, and floats above the page on a high z-index so it is never hidden behind other content.
Because the popup only appears when triggered, turn on Force Visible (in the Meta option group, covered below) while you design so you can see and style the panel on the canvas.
Add The Divi Tooltip Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Tooltip module and click on it to load it. Alternatively, you can use the Search option to find it.
Note: A tooltip inherits a few defaults out of the box - a solid black background (#000000), 3px rounded corners, and tight padding (3px top and bottom, 6px left and right). Adjust these in the Design tab if you want a different look.
Tooltip module use cases
Form field hints: Explain what a field expects without cluttering the form.
Icon and image labels: Reveal a caption or short description when a visitor hovers over an icon or thumbnail.
Definitions and footnotes: Surface extra context for a term inline, on demand.
Mini promo cards: Show a small rich-content panel - text plus other modules - beside a button or product.
Tooltip Module Settings Breakdown
Once you've added the Tooltip module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab holds the tooltip's text, its link behavior, and standard content options.
Text - Edit the Tooltip's content text using the rich text editor.
Link - make the whole module link to a page, section, or external URL.
Elements - Add nested module.
Background - set the Tooltip's background color, gradient, image, or video. The default background color is solid black.
Loop - repeat the module's content from a data source.
Order - control the module's order when it is generated dynamically.
Meta - label the module and, importantly, turn on Force Visible (the While In Builder option) to preview the popup on the canvas while you design.
The Design tab
The Design tab is where you control the tooltip's behavior and its look. The first group is unique to this module.
Tooltip - the module's signature group, and it allows you to choose how the Tooltip module behaves:
Show Tooltip on:
Hover - Show the tooltip's content when you hover the target element.
Click - Show the tooltip's content when you click the target element.
Always - The tooltip's content is always visible; it doesn't require any interactions such as hover/click.
Tooltip Movement:
Anchored - By default, the tooltip is displayed at the top of the target element. You can change that using the Tooltip Position option
Follow Cursor - The Tooltip will show depending on the type of Show option you choose, and it will follow the mouse cursor.
Tooldip Position - Choose the Tooltip display position - where the tooltip will show in relation to the target element.
Tooltip Skid - Shifts the tooltip along the target edge (cross-axis offset from the placement).
Tooltip Distance - Choose the gap from the target along the placement direction (main-axis offset).
Tooltip Open Delay - Set the delay before the tooltip opens.
Tooltip Close Delay - Set the delay before the tooltip closes.
Show Tooltip Arrow - Display a small pointer arrow toward the parent module.
Layout - controls how child modules inside the tooltip are arranged.
Body Text - style the font, size, color, and spacing of the popup text.
Sizing - set the popup's width, max width, height, and alignment.
Spacing - adjust the popup's padding and margin. The default padding is
3pxtop and bottom,6pxleft and right.Border - add borders and round the corners. The default corner radius is
3px.Box Shadow - add depth with a drop shadow around the popup.
Filters - apply visual effects such as hue, saturation, and blend modes.
Transform - scale, rotate, skew, or move the popup.
Animation - add a motion effect when the popup appears.
The Advanced tab
The Advanced tab handles attributes, conditional display, and how the tooltip behaves on the page.
Attributes - assign a CSS ID and classes for custom styling.
HTML - add custom HTML attributes to the module.
Conditions - show or hide the tooltip based on rules such as login status or device.
Interactions - trigger actions in response to visitor interaction.
Visibility - disable the tooltip on specific screen sizes (Disabled On) and control content Overflow.
Transition - set the timing and speed of hover transitions.
Position - control placement and the module's Z-Index (the tooltip floats on a high Z-Index by default).
Scroll Effects - add scroll-based motion and sticky behavior.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
