Overview of the Advanced Tooltip module

This page shows you how to add the Advanced Tooltip module to your page and explains every setting in its Content, Design and Advanced tabs, with screenshots. The Advanced Tooltip module shows a tooltip when visitors hover over or click on a button, image, icon or text, and the tooltip can hold text, an image or a Divi Library layout. For more details, view the demo.

How to add the Advanced Tooltip module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for DP Advanced Tooltip in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab holds the module’s own settings, grouped in the toggles below. Link, Background and Element Label are the standard Divi options.

Configuration

• Trigger Action: Select the tooltip trigger action.
• Tooltip Placement: Select the tooltip trigger action.
• Trigger Element: Select the element on which you want to trigger the tooltip.
• Trigger Button Text: Input the text to be used for the button.
• Trigger Button URL: Input the URL to be used to open on click of the button.
• Trigger Button Link Target: Choose whether or not your link opens in a new window for the button.

Content

• Tooltip Content Type: Choose what type of content you want to display inside modal body.
• Tooltip Text: Input the text to be used for the tooltip content.

Tip: Set Trigger Action to Click if the tooltip holds links or buttons, so visitors can reach them.

Design tab settings

The Design tab lets you style each part of the module:

• Trigger Button: styling options for the trigger button.
• Tooltip Styling: styling options for the tooltip styling.
• Tooltip Content Text: styling options for the tooltip content text.
• Sizing, Spacing, Border, Box Shadow, Filters, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.