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
Prerequisite:
- Expand (+) icon next to the settings icon in Titan Web. A list of elements will show.
- Choose the Button option from the list.
- Next, drag the Button element to the canvas.
- Select the Gear icon of the button element. The Button Settings screen opens.
- Navigate to Interactivity, and use the toggle switch to enable the Hover Modal option.
- Select the Hover Modal Gear icon. The Configure Hover Settings screen opens.
- Select the Hover Modal that you created.
- Select an option:
- OnModal Show
- OnModal Hide
- 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..