Hover Modal

Business Background

Use the Hover Modal function to display a custom modal to the user when they hover over an element, and they must interact with the modal to continue. For example, display a modal with additional options from which the user can choose.

How to Video

• 00:00 Introduction
• 0:02 What are Hover Modals, and how do they benefit the user?
• 2:11 Navigate to the Index Settings.
• 2:20 Learn how to Configure Hover Modal Settings.
• 3:20 Preview the updated project.

How to Guide

1. Expand (+) icon next to the settings icon in Titan Web. A list of elements will show.
2. Choose the Button option from the list.
3. Next, drag the Button element to the canvas.
4. Select the Gear icon of the button element. The Button Settings screen opens.
5. Navigate to Interactivity, and use the toggle switch to enable the Hover Modal option.

6. Select the Hover Modal Gear icon. The Configure Hover Settings screen opens.

7. Select the Hover Modal that you created.
8. Select an option:
   • OnModal Show
   • OnModal Hide
9. Configure an OnOpen Modal Action, for instance, show a message.

The Hover Modal pop-up displays in preview mode when the user hovers on the element where you configured the hover modal option..