• Product

    Document Studio

    Generate, Sign, and Automate Salesforce documents with real-time sync

    Document Generation eSign Files CLM

    Experience Studio

    Build portals, apps, and forms directly in Salesforce with Dynamic data flow and adaptability

    Forms Flows Portals Surveys

    Go Unlimited

    Portals & Web Apps
    High-Volume Doc Gen
    Forms & Synced Surveys
    eSign & Contract Lifecycle
    Enterprise Compliance
    All-in-One Suite
    Book a demo
  • Solutions
    Financial Services

    KYC, mortgages, and compliance
    Healthcare

    HIPAA patient intake and portals
    Education

    Admissions and FAFSA automation
    Nonprofit

    Donors, grants, and workflows

    Legal

    Intake, contracts, and approvals
    Insurance

    Quoting, claims, and renewals 

    Go Unlimited

    Portals & Web Apps
    High-Volume Doc Gen
    Forms & Synced Surveys
    eSign & Contract Lifecycle
    Enterprise Compliance
    All-in-One Suite
    Book a demo
Log In Slack sales

Titan Support

How can we help you?

Platform

Hover Modal

Description

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 Guide

Note:

Prerequisite:

Create and customize a modal.

In this example, we created the following modal:

This image has an empty alt attribute; its file name is image-458.png

  1. Click the + icon to open the list of elements.
  2. Select the Button option from the list and drag-and-drop a button element to the canvas.
  3. Click the Gear icon of the button element. The Button Settings screen opens.
  4. Select the Interactivity option.
  1. Use the toggle switch to enable the Hover Modal option.
  2. Click the Hover Modal Gear icon. The Configure Hover Settings screen opens.
  1. Use the drop-down list to select the Hover Modal that you created.
  2. Click the Apply button.
Configure Hover Settings screen
Configure Hover Settings screen
  1. Save and Preview the project.
  2. Place the mouse over the button. The hover modal is shown.
Hover modal example
Hover modal example
  1. To configure an action when the modal is hidden, click the OnModal Hide button. The OnOpen Modal Action screen opens.
Configure Hover Settings screen
Configure Hover Settings screen
  1. Click the + icon next to Start. The Add Modal screen opens.
OnOpen Modal Action screen
OnOpen Modal Action screen
  1. Click a node to add it. In this example, the Show message option was selected.
  2. Click the Next button.
Add Node screen
Add Node screen
  1. Type a message and click the Next button.
Add Node/Show message screen
Add Node/Show message screen
  1. Type a tag if necessary and click the Insert button. The Show message node is added.
  2. Click the Apply button.
Show message node added
Show message node added
  1. Click the Apply button on the Configure Hover Settings screen.
  2. Save and Preview the project.
  3. Place the mouse over the button. The hover modal is shown.
  4. Move the mouse away from the button. The message is shown.
Show message example
Show message example

The Only Forms Solution Built 100% in Salesforce.

Slack an expert