Hover Modal

Business Background

Use the Hover Modal function to display a custom modal to the user when they hover over an element. For example, display a modal with a message or 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. Select the Button option from the list and drag-and-drop the Button element to the canvas.
3. Click the Gear icon of the button element. The Button Settings screen opens.
4. Navigate to Interactivity and use the toggle switch to enable the Hover Modal option.
5. Click the Hover Modal Gear icon. The Configure Hover Settings screen opens.

6. Use the drop-down list to select the Hover Modal that you created.
7. Click the Apply button.

8. Save and Preview the project.
9. Hover with the mouse over the button. The hover modal is shown.

10. To configure an action when the modal is hidden, click the OnModal Hide button. The OnOpen Modal Action screen opens.

11. Click the + icon next to Start. The Add Modal screen opens.

12. Click on a node to add it. In this example, the Show message option was selected.
13. Click the Next button.

14. Type a message and click the Next button.

15. Type a tag if necessary and click the Insert button. The Show message node is added.
16. Click the Apply button.

17. Click the Apply button on the Configure Hover Settings screen.
18. Save and Preview the project.
19. Hover with the mouse over the button. The hover modal is shown.
20. Move the mouse away from the button. The message is shown.