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:
Step 1:
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.
Step 2:
This is the JavaScript and CSS responsible for making the Tooltip operate:
Go to Module Configuration –> Layout (Panels / Tabs, Header / Footer / System Messages, Sort Order) –> Header / Footer / System Messages –> Header Message and copy/paste the JavaScript to the section illustrated in the image below:
**NOTE: Be sure that you’re using the BASIC TEXT BOX AND HTML TEMPLATE to save the JavaScript(Take a look at the Radio buttons that I have selected in the image above).
Then Click “Update Message” to save this template.
Step 3:
Now we’re going to want to take the HTML ID’s of our Dynamic Form Questions from Step 1 to piece together the JavaScript to assign titles to our Questions. We’re going to use:
document.getElementById('IDHERE').title
Based on my information from Step 1, I can begin piecing together my JavaScript:
// 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';
Go to Module Configuration –> Advanced Coding Options (AJAX, jQuery, JavaScript, Initial SQL DataBind) –> Custom JavaScript File –> and Copy/Paste your JavaScript into the Initial JavaScript section(illustrated by the image below):
*** NOTE: Now make sure that you click “Update Settings” at the bottom of the page to save your JavaScript configuration.
Conclusion:
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.