Dynamic Forms has a feature named “Help Icons” which work as Tooltips for your Questions. By Default this feature is disabled, so to enable you’ll need to go to Module Configuration –> General Settings and Uncheck the checkbox “Hide Help Icons”. Below is an image of how this feature operates.
However I always enjoy pursuing alternate methods to achieve a more efficient and dynamic solution. This example will be showcasing the jQuery UI Tooltip Widget. I will be integrating Dynamic Forms and the jQuery Tooltip Widget in this example. Below is an image of the Dynamic Form we’ll be using for this example.
To implement this behavior, I’ll show you how to do this in 3 simple steps:
Accumulate all of the HTML Id’s of the controls that you wish to have the Tooltips.
For instance, I have Inspected the First Name, Last Name and Email Address Textboxes using FireBug in Firefox and located the following ID’s in my Dynamic Form:
First Name HTML ID = dnn_ctr2640_DynamicForms_TBR_GUIDf329fd1d-a30c-4cd9-b7ce-44fd1c54518aFName
Last Name HTML ID = dnn_ctr2640_DynamicForms_TBR_GUID7169778c-218e-4345-be2c-d98f224fe7cfLName
Email Address HTML ID = dnn_ctr2640_DynamicForms_TBR_GUIDf91097e8-4251-49b8-ad31-c93905ad6101EmailAddress
** NOTE: Your Dynamic Forms Question HTML ID’s will be completely different than the one’s in this example. Copy/Paste won’t work for Step 1.
Then Click “Update Message” to save this template.
// Tooltip for First Name:
document.getElementById('dnn_ctr2640_DynamicForms_TBR_GUIDf329fd1d-a30c-4cd9-b7ce-44fd1c54518aFName').title = 'Enter First Name';
// Tooltip for Last Name:
document.getElementById('dnn_ctr2640_DynamicForms_TBR_GUID7169778c-218e-4345-be2c-d98f224fe7cfLName').title = 'Enter Last Name';
// Tooltip for Email Address:
document.getElementById('dnn_ctr2640_DynamicForms_TBR_GUIDf91097e8-4251-49b8-ad31-c93905ad6101EmailAddress').title = 'Enter Email Address';
You should now understand how to implement the jQuery Tooltip Widget into your Dynamic Form. If you have any questions please feel free to leave a comment.