Great Ideas. Always Flowing.

We are not happy until you are happy. Client satisfaction guaranteed. Whatever your needs and requirements, we have the skills and resources for the job!

Popular Posts


2008 2008 Express Add AFTER alert Alias Aliases Alter Alternating And ASC Assist BETA Blog Cancel Check ON Checkbox Checkbox Group Color Column Columns Combo Box Composite Confirm Confirm Message Control CREATE CREATE TABLE Data Data Springs Database DDL DELETE Delete Confirm Demo Demonstration DESC Direct Access DNN DotNetNuke Drop Drop Constratint Drop Down Drop Down List DS Dynamic Dynamic Blog Dynamic Forms Dynamic Registration Dynamic Views Edit Event Example Express Fade In Fade Out Field Filters FK Forms Full-Table Scan Generating Generator Generators Great Ideas Group Help HTML Increase Index Indexes Input Integrity jQuery Label Listbox Listener Message Modify My Account MySQL No NULL Often Ok ON Optimization Optimize Option Options Oracle Order By Perform Performance PK Popup PostreSQL Queries Query QuestionOptionValue Radio Button Radio Button Group References referential Round Script Search Search Filters SearchOption SearchOptionValue Select Server Snippet Sort Springs SQL SQL Driven SQL Driven Query SQL Express SQL Server SQL Server 2005 SQL Server 2008 SQL Server 2008 Express SQL Server 2008 R2 SQL Server Express SSMS Stored Stored Procedure TABLE Tables Temporary Tool Tools Tooltip Tooltips Transact-SQL Trials Triggers TSQL T-SQL Unique UPDATE Use Useful Views Widget Widgets Window Yes [userimage] 10 64 bit Ability ABS Action Active Forums Alleviate Alternating Colors Alternating Rows Analytics ARB validation AuthARB Authorize.NET Avoid Back Button Basecamp Blog Blog Posts Blogging Browser Browser Back Browser Close Browser History Browser Script Button cascading style sheet Case Char Character CharAt CharAt() Check chip levinson Click client side validation Close Browser Close Window Collection 5.0 Comment Compatibility Compatible Completion completion event Confirm Message Conform Constraints content localization Count Timer Countdown CRM css csv Cursor Custom Custom HTML Custom JavaScript Custom JavaScript File customer feedback Customize Data Data Integrity Data Springs Data Springs Blog Data Springs Collection Data Springs Development Data Springs Planning Data Springs Training Databases DataSprings Date Time JavaScript Debug Info default value Delete Demonstration DF DNN DNN Authentication DNN Blog DNN Core Profile Property dnn html module dnn modules dnn schedule error dnn schedule multiple DNN Store document document.getElementById DotNetNuke dotnetnuke 5.4.4 DotNetNuke Analytics DotNetNuke Forums DotNetNuke JavaScript DotNetNuke Modules dotnetnuke reporting dotnetnuke scheduler dotnetnuke user image Double Double Quotes DR DROP Drop Constraint DropDown Login DS dynamic Dynamic Data dynamic fields Dynamic Form Dynamic Forms dynamic forms silent post Dynamic Forms Tutorial dynamic login Dynamic PDF Form Completion Event dynamic registration dynamic registration silent post dynamic registration user image dynamic user directory dynamic views DynamicRegistration_Question DynamicRegistration_QuestionResponse email email issues Encapsulated Encapsulation Even Event Event Viewer Example Excel Execute Export Export to Excel Facebook Facebook Connect Field FieldID First FirstName Fix Foreign Key Form Form Post Formatting Forms Forum Flow Full Table Scan Fully Function Google Analytics Google Analytics Ecommerce Great Great ideas Grid guides hidden field Hide Show Rows Highrise Highrise API Hourly Services HTML HTTP Post iDeal IE IE 10 Image Image Button Include Inconsistancy Info Information Injection INSERT Integration Interactive User Import Interface internet Internet Explorer iPAD iPAD App for Highrise iPAD Highrise App Items JavaScript JavaScript hide show JS Function Layout Lead Generation Learn Left Left Quote Link LinkedIn list import Live Blog localization Log Logic Login login module login skin object Loop Mandeeps Match Message Microsoft Live Writer module configuration Modules Monthly Services Name Netherlands New News Blog NL NOT NULL oAuth2 Odd OnClick Open Web Studio opt in email OWS Part 1 Part 2 Passed payment gateway paypal Phone Number Placement Post Postback Posts Premium Integration Premium Services Premium Support Primary Key Procedure Products profile Quarterly Services Question question fields Question Loop Question Value QuestionOption Quick Quotes Recommend Recommendation Recurring Billing Redirect Referential Integrity registration Rendered Replace replace html text report views reports Resolution Resource resource files resx Retrieve Retrieving Right Right Quote Rows Ryan Bakerink Sales Force SalesForce Script Scripting Scripts Sequential Access server side validation Silent Post Single Single Quotes Single Sign On skin object Snowcovered Solution sp Springs SQL sql 2005 pivot sql default value SQL Example sql import SQL Injection sql query sql replace statement sql reports SQL Server sql server 2005 SSL SSO stored stored procedure String style sheet stylesheet Submit Submit Button Submit Image Submit Link success story Suggest Suggestion Support Syntax Table technical techwise research Temp test credit card numbers testimonial Text/HTML thumbnail image Time Timer Tip Token Topic Transaction Trial Trigger TSQL T-SQL Tutorial Twitter Types of Constraints Unique Update Highrise user user directory user profile image users online Variable View Web Based Work Around writer writing xls xlsx XML

In the Flow


Data Springs, Inc. - An online diary and web log from staff and customers for premium DotNetNuke resources, Data Springs Modules, and Data Springs Services.

Integrating Dynamic Forms and the jQuery Tooltip Widget

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

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

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=""></script><script language="JavaScript" src=""></script> <link rel="Stylesheet" type="text/css" href="" /><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

**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:


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

*** NOTE: Now make sure that you click “Update Settings” at the bottom of the page to save your JavaScript configuration.


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.

Comments are closed.

Recent Comments


Join our mailing list...

Get current news and events the easy way
Subscribe Me

Recent Blogs...

Copyright 2005 - 2011 by Data Springs, Inc.
  • film izle
  • 720 izle
  • film
  • sinema izle
  • film makinesi
  • T�rk�e dublaj film
  • film izle
  • film izle
  • baglan film izle
  • sinema izle
  • 1080 film izle
  • film mercegi