27.01.2013 Updated to v1.5 and added MUI support.

30.04.2012 Updated the solution to Move the tooltip image to the formlabel field and ensured all fields are visible when entering “fftsetup=1”.

26.02.2012 Updated the solution to prevent cutting the top of large tooltip containers.

I have previously posted a solution for adding HTML tooltip for selected fields in a SharePoint form. Your find it here.

This is an updated version that is easier and cleaner – and it supports both SharePoint 2007 and SharePoint 2010.

Hover over the image to preview the tooltip

Add “fftsetup=1” to the URL to enter edit mode
For NewForm: /Lists/MyList/NewForm.aspx?fftsetup=1
For DispForm: /Lists/MyList/DispForm.aspx?ID=12&fftsetup=1
For EditForm: /Lists/MyList/EditForm.aspx?ID=12&fftsetup=1

You then enter edit mode

Wrap the tooltip text/HTML in a div with a width attribute like this:

<div style="width:200px">
   The tooltip text/HTML goes here
</div>

Or you can set a fixed width in the CEWP code under the style for “tooltipHolder” – see CEWP code example below.

1. Download the latest version of “spjs_utility.js” from here
2. Download the file “SPJS-FormFieldTooltip.js” and the CEWP code from here
3. Upload “spjs_utility.js”, “SPJS-FormFieldTooltip.js” and jQuery (if you prefer a local copy), to a shared document library, or a folder created in SharePoint Designer. Ensure all user have read access to the location where you put the files.
4. Change the three variables in the top of the CEWP code, and the script src to jQuery, “spjs-utility.js” and “SPJS-FormFieldTooltip.js” to reflect your local copies.
5. Upload the CEWP code as a txt file to the same location as the other files.
6. Add a CEWP below the form web part in NewForm.aspx / DispForm.aspx / EditForm.aspx and use the “content link option” to link to the CEWP code you uploaded in the previous step. You may also use the HTML form web part and put the CEWP code in the “source editor” directly.
7. Enter edit mode by appending “fftsetup=1” in the URL as described above.

This is the CEWP code

<script type="text/javascript">	
	var settingsListBaseUrl = L_Menu_BaseUrl;
	var thisListID = "mylist";
	var hoverImgPath = "/_layouts/images/hhelp.gif";
</script>
<style type="text/css">
img.customTooltip{
	float:right;
	cursor:pointer;
}
td.toolTipEditor{
	vertical-align:top;
	padding:5px;
	background-color:#DFFFA5;
}
textarea.tooltipTextarea{
	height:150px;
	width:300px;
}
#tooltipHolder{
	background-color:#feeebd;
	padding:5px;
	border:1px silver solid;
	display:none;
	/*width:200px;*/
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
</style>
<div id="tooltipHolder"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/spjs-utility/24.02.2012/spjs-utility.js"></script>
<script type="text/javascript" src="/test/Scripts/TooltipV2/SPJS-FormFieldTooltip.js"></script>

You must change these variables:

• settingsListBaseUrl: This is the baseUrl to the site where the configuration list should be created. Use the variable L_Menu_BaseUrl to refer the current page.
• thisListID: This is the unique id of the list you want the tooltip to appear in. If you plan to use the solution for multiple lists in one site, this value must be unique for each list as it’s this value that identifies which tooltip is for which list.
• hoverImgPath: This is the path to the image the user hovers over to preview the tooltip.

When you first enter setup, you are presented with this prompt

Hit “OK” to create the list. You will get this “receipt”

You will never have to hand edit the configuration list, therefore I have not said a whole lot about it…

If you like the solution – buy me a beer!

Alexander

29.05.2012 I have published a production release here

You can no longer leave comments in this article. Please post any comments or questions in the one linked above.

29.01.2012 I have done some work during this weekend, and i see that i have underestimated the complexity dealing with other than “is equal to” in this solution. I will see what i can do about that, and will post a new version as soon as i can manage. In the meantime, stick with “is equal to”.

Please note that this solution is under development – and is still BETA. I’m almost certain I’ll have to change the configuration options – and this will break the existing “filters”. Please bear this in mind when testing this solution.

Alexander

22.01.2012
I have redone the script due to some bugs in the initial release. It should still be considered as a “beta”, but i hope as many as possible can test it and let me know the result.

I have not added any functionality over the initial release as i want to ensure the parts already in it works as expected before doing so. I have however noted these requests:

1. DispForm support
2. Set field value / clear field value

Alexander

I posted a teaser for my latest project in December. Now I thought it was time to post a working solution!

This solution will let you add dependent logic to your forms.
For example you could have a Yes/No check box determines whether some fields as required or not, or the status selector in a Tasks list can toggle which fields are visible or read only when you change from “In progress” to “Completed”.

Please note that the initial release is set to v0.9. I expect you to find some bugs! Please test it and comment below if you find something wrong, or you have a feature request.

All screenshots are from SharePoint 2010, but this solution is designed for both SharePoint 2007 and SharePoint 2010. I have tested it in IE7, IE9, FireFox 9.0.1 and Google Chrome 16.0.912.75.

Download the file “DynamicFormsForSharePoint.js” and “spjs-utility.js” from here. Please note that you will need the version dated 18.01.2012 or newer of “spjs-utility.js”. You find the files in folders with corresponding names. You also need jQuery – download i here. You may use the latest version, but i prefer v1.6.4 as it is faster in some areas. Please note that not all of my other solutions will work with jQuery v1.7x.

Put these files in a document library or a folder created with SharePoint Designer. Ensure all users have read access to this location.

This solution is set up by referring a script from NewForm and EditForm of the lists where you want the solution activated.

Add a CEWP to NewForm and EditForm like this

SharePoint 2007
Go to NewForm and EditForm and edit the URL by adding toolpaneview=2 behind the URL in this format:
…/NewForm.aspx?toolpaneview=2
…/EditForm.aspx?ID=12&toolpaneview=2

Press Enter and you should be able to add a CEWP to the page. Put the CEWP below the form web part.

SharePoint 2010
In the list view, click “List” on the List Tools menu. Then select “Form Web Parts” and pick NewForm and Editform from there and add a CEWP to the page. Put the CEWP below the form web part.

I recommend using the Content link option in the CEWP to refer the code like the example below. The CEWP code should be put in a text file (txt) or an aspx file like in the example below. This file should be put in the same location as you put the file “DynamicFormsForSharePoint.js”. You could also put the code directly in a HTML Form web part as this web part is handled in a slightly different manner in SharePoint 2010, and therefore does not mess with the script generated HTML.

CEWP setup in SharePoint 2010

The code the file CEWP.js.aspx

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="/test/Scripts/DynRequired/spjs-utility.js"></script>
<script type="text/javascript" src="/test/Scripts/DynRequired/DynamicFormsForSharePoint.js"></script>

You must change the script src to all files so that they refer your local files.

These three scripts are all that goes in the CEWP – all configuration is done in a graphical user interface.

When this solution is first setup in a site, the configuration list is created automatically. This list is not to be hand edited, and it can be hidden using SharePoint Designer if you like.

When you configure the solution for a specific NewForm or EditForm, the configuration is stored using the site-relative URL of the form as an identifier. When a user loads the form in a browser, this configuration is read from this location and the rules are applied “on the fly”.

Note:
When manipulating required fields, you must NOT set the fields as required under list settings in SharePoint. Let this script handle it.

When the solution is set up, the only thing giving it away is the little version number in the bottom left corner of the form:

You click this version number to enter the configuration. Note that this version number is visible only if the solution has not yet been set up, or the logged in user is the one that configured the solution for this particular form in the first place.

You can however enter the edit mode manually by appending to the URL like this:NewForm.aspx?setup=1 or EditForm.aspx?ID=10&setup=1

If you set up a password protection for the configuration, you are prompted for the password when entering the edit mode:

This dialog is bypassed if there are no password.

You then enter the configuration:

You can use these field types as “triggers”:
Yes/No, Drop-Down Menu, Radio Buttons, Checkboxes (allow multiple selections) and Single line of text.

You can use the following operators to match their value

• is equal to
• is not equal to
• is greater than
• is less than
• is greater than or equal to
• is less than or equal to
• begins with
• contains

The Configuration

This configuration will result i these changes to the form

Let me know if you get this solution working. I’ll update the article with any missing parts tomorrow, so please let me know if you find any bugs in the solution, or missing steps in the article.

Alexander