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.
![FireShot Screen Capture #046 - 'GoToTraining Page 1' - www_datasprings_com_gototraining-page-1 FireShot Screen Capture #046 - 'GoToTraining Page 1' - www_datasprings_com_gototraining-page-1](http://www.datasprings.com/Portals/0/LiveBlog/2285/FireShot%20Screen%20Capture%20_046%20-%20'GoToTraining%20Page%201'%20-%20www_datasprings_com_gototraining-page-1_thumb.png)
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.
![FireShot Screen Capture #042 - 'GoToTraining Page 1' - www_datasprings_com_gototraining-page-1 FireShot Screen Capture #042 - 'GoToTraining Page 1' - www_datasprings_com_gototraining-page-1](http://www.datasprings.com/Portals/0/LiveBlog/2285/FireShot%20Screen%20Capture%20_042%20-%20'GoToTraining%20Page%201'%20-%20www_datasprings_com_gototraining-page-1_thumb.png)
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:
<script language="JavaScript" src="http://code.jquery.com/jquery-1.8.3.js"></script><script language="JavaScript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="Stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /><script language="javascript">$( document ).tooltip();</script>
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:
![FireShot Screen Capture #043 - 'GoToTraining Page 1' - www_datasprings_com_gototraining-page-1_ctl_edit_mid_2640_initial_dynamicformssettingsdiv FireShot Screen Capture #043 - 'GoToTraining Page 1' - www_datasprings_com_gototraining-page-1_ctl_edit_mid_2640_initial_dynamicformssettingsdiv](http://www.datasprings.com/Portals/0/LiveBlog/2285/FireShot%20Screen%20Capture%20_043%20-%20'GoToTraining%20Page%201'%20-%20www_datasprings_com_gototraining-page-1_ctl_edit_mid_2640_initial_dynamicformssettingsdiv_thumb.png)
**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):
![FireShot Screen Capture #047 - 'GoToTraining Page 1' - www_datasprings_com_gototraining-page-1_ctl_edit_mid_2640_initial_dynamicformssettingsdiv FireShot Screen Capture #047 - 'GoToTraining Page 1' - www_datasprings_com_gototraining-page-1_ctl_edit_mid_2640_initial_dynamicformssettingsdiv](http://www.datasprings.com/Portals/0/LiveBlog/2285/FireShot%20Screen%20Capture%20_047%20-%20'GoToTraining%20Page%201'%20-%20www_datasprings_com_gototraining-page-1_ctl_edit_mid_2640_initial_dynamicformssettingsdiv_thumb.png)
*** 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.