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.
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
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.
- Download the latest version of “spjs_utility.js” from here
- Download the file “SPJS-FormFieldTooltip.js” and the CEWP code from here
- 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.
- 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.
- Upload the CEWP code as a txt file to the same location as the other files.
- 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.
- Enter edit mode by appending “fftsetup=1” in the URL as described above.
This is the CEWP code
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.
You will never have to hand edit the configuration list, therefore I have not said a whole lot about it…