Form Field Tooltip for SharePoint 2007 and SharePoint 2010

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
IMG

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
IMG

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.

How to set it up
  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
IMG

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

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


Buy me a beer!If you like the solution – buy me a beer!

Alexander

89 Comments on “Form Field Tooltip for SharePoint 2007 and SharePoint 2010”

  6. Ok, it works great when adding the cewp while editing the newform but no mouseover after I have exited edit mode. Image shows up so not sure what is wrong.

  7. Here’s another thing. I decided to go back into fftsetup and now wehn I click on “Save Settings” I get an error:

    [saveFormFieldToolTipSettings]

    null

    I tried moving the cewp above the Dynamic Forms and no difference. I even tried to make changes to the tooltips….

    1. Hi,
      This is the setup you should have in your CEWP to have it coexist with the dynamic forms solution:

      <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>
<script type="text/javascript" src="/test/Scripts/DynRequired/DynamicFormsForSharePoint.js"></script>

      Alexander

    2. I have that and the only change I had to make was the variable “thisListID” has the listguid. Why is this working when editing the newform but not when I exit it?

    5. I have tested it in IE7 without any issues.

      Are you sure you have the latest version of spjs-utility.js?

      Can you try to set it up in a clean new list to see if that works?

      Alexander

    8. Ok, I re-downloaded all your files (spjs-utility.js dated as todays date 2/24/12), I made sure all of the older files were removed first. I am hosting all files internally in a folder on the root of the site and path is correct.

      I created a new list and added the cewp and nothing else, using the listGUID for this list. I went into fftsetup and made my changes and saving was fine.

      I am still having the same issue, mouse changes to hand over the image and nothing shows. It works fine however when I am in edit mode “toolpaneview=2”.

      I went back and saved settings on the other form just to be safe and still cannot get the tooltip in either list.

    10. Yes the master page has been altered by the company. They use their trademark all over the sites. I can check anything you need me to regarding the master page but thats as far as it will go as I am only a site admin. I will get you a screenshot shortly.

  8. I do however have a few questions for you.

    If your asking if the master page was changed (which it has with their branding and not sure what else), why is your Dynamic Forms working fine then?

    Lastly, when I am editing the page the mouseover works fine as I see the tooltip but when I am out of editing mode it does not work?

    1. The positioning of the tooltip can be affected by the page layout. I’ll take a look at it later today, but you can play around with the “left” variable in line 83 and see if you can make it appear correctly in your page. The left variable represents the pixels from the left where the tooltip should be positioned. Try alerting the value of “left” in line 84 first. If it’s below 0, or over the page width you have your problem pointed out.

      Alexander

    2. I never thought of that and thank you for pointing that out. I am a PHP Developer and I wasn’t even thinking along those lines…problem is, too much pressure on the project makes you not always think clearly.

    3. Ok, alerting the value shows me a left value of “792” and when editing the page (toolpaneview=2) it shows me a left value of “2”.

      I tried many combinations and no luck, I even went as far as to bring it down to 2. The form width when viewing source is total 600px.

      1. Try setting both top and left to 0.

        This should preview the tooltip in the top left corner of your page. If you see it there it’s a start.

        Have you tried using another browser for cross reference?

        Alexnader

    4. I tried both but no luck. I work at a government site so I am limited to IE7. However, I checked both the default master page and the company one and see nothing different other than branding.

      I did some digging and see you look for id=MSO_ContentTable at line 77. This ID for this table changes when in edit mode versus non edit mode…maybe a clue?

    5. I submiited too fast. When in edit mode with top and left set to “0” it does not show in the top left corner….I have to increase both numers to: top-259 and left:-744.

    6. This was a wrong statement:
      “This ID for this table changes when in edit mode versus non edit mode…maybe a clue?”

      The table size is what changes between modes….

    7. Try v1.2 and update the CEWP code and add this variable:

      var fftDebug = true;

      Then enter NewForm.aspx and trim out all “rubbish” from the URL so that you actually see the #hash part.

      The URL should now look like this when you mowe the mouse in the page: /NewForm.aspx#top=25_left=610

      What are the top and left coordinates when you hover over the image to preview the tooltip?

      Alexander

    8. Here is what I get when I hover over the top most image: top=319_left=752. This is with the default values on lines 88 & 89 in your script.

      The left stays consistant hovering over every image and top as expected changes.

    9. Here is another thing I just noticed. The hover over the image is very sensitive the further down the page I go and is difficult to see the tooltip. Some of them are chopped off at the top if they are large if you have scrolled down the page.

    11. I viewed the page source and your script and see your using for top the s4-workspace which I do not see in the source of the page. Funny thing is though that I don’t see it in edit mode source but yet the tooltip shows…maybe a clue?

    12. Hi,
      This is for SP2010 only – you can see that this is wrapped in

      if(typeof(_fV4UI)!=='undefined'){...}

      The variable “_fV4UI” exists in SP2010 only.

      I have updated the solution to prevent cutting the top off the tooltip container, but I do not have any more to help you with the missing tooltip in “non-edit-mode”.

      Did you try the solution in a clean list without other solutions that may interfere?

      Alexander

    13. Gotcha. Yes I do have a test form setup with nothing other than the tooltip.

      I am stumped as to why it works in “edit mode” and not “non-edit-mode”…hopefully someone else may be able to chime in.

    14. Ok, issue has been resolved. By habit, I set the cewp to hidden…DUH!!! I went in and unchecked this and all is well. It dawned on me as to why it wouldn’t work in non-edit vs edit modes.

      You may want to let others know to NOT hide the web part.

  9. I did find something when using this with “Dynamic Forms”. When in fftsetup you do not see all the fields on the form thus preventing us to enter a tooltip for them.

    1. Hi,
      No, i have not tested these together. Report back if you find any incompatibility and I’ll see what i can do.

      Alexander

  12. Like Bob I am using in conjunction with Dynamic Forms, my tooltip icon does not show up on columns that Dynamic Forms is making readonly, also can the icon be pushed a bit further to the right? on most column types it seems to make the column height larger than columns without the icon.

    Thanks,
    Ken

    1. Hi,
      I have updated the solution and placed the image in the “td.formlabel”. This should prevent it from being hidden when setting the field to read only.

      Alexander

  13. Hi Alexander, You are great…Your solutions works like a charm for Sharepoint Default New/Edit/Display forms…But, i have to use Sharepoint Custom Forms because of some clients requirements, which your solution doesnt seem to work….Because i have lots of custom forms, im not able to use tooltips for fields of my Forms….Can you please tell me how to make this code work to display Tooltips for SP Custom Forms??? Im really in a problem…Hope you would help me out of this issues…Thanks a lot for running this website…Its really super cool…

  14. I am having an issue similar to BobMac’s. My site was converted to SP2010, but I am still in the v3 mode. After conversion, the tooltip no longer shows on the hover event on any of the three form pages. When I edit the page I can see the tooltop display under the CEWP as I hover over the icon.

    I’ve looked at z-index, creating a new clean list, making sure the CEWP isn’t hidden, etc. When I alert the _fV4UI variable I get “false” instead of “undefined”, but I am assuming the 2007 function executes. I’ve alerted the top and left and get good values. So I’m a little stuck… can you think of anything else I can check?

    Thanks!

      1. Finally figured this out. I left out the DIV line from the CEWP script contents.

    1. Hi,
      Not sure I understand what you mean. If you do not enter any value in the tooltip textarea, you get no tooltip for that field.

      Alexander

    2. Your right, I apologize. What happened is I used your first version and it had the div tags in all areas, then I upgraded and once I removed the tags it works as advertised.

  16. Hi There

    I am trying to get this working and am having difficulties obtaining the thisListID. I am using the 2007 Free Version of Sharepoint.

    Any help would be appreciated.

    Iain

  18. I too have an issue with Javascript errors (Object Expected) in normal mode while it works in Edit mode. Its failing on the last line shown below.

    $(document).ready(function() {
    updateListItem();
    });

    function updateListItem() {

    var siteUrl = ‘/sites2/sppwgrqy/DashboardTest/’;
    alert(‘now to get siteUrl’ + siteUrl );

    var clientContext = new SP.ClientContext(siteUrl );

    1. No hidden components.
      works fine in Edit mode.
      when I supply the full path to ClientContext it complains it is outside the bounds, so I think this path is accurate.

    4. good Idea, I upgraded to jquery-1.8.3.min.js with no change.
      Same Object Expeced error.

      I have seen others complain of this, but have never seen a solution.

      anything else I could try? Note: I am not using Designer, just embedding into CEWP.

    5. Hi,
      Sorry for the late reply. Did you manage to get it to work?

      In my example, the siteUrl is represented with the variable L_Menu_BaseUrl – did you try using that variable?

      Alexander

      1. No I found no solution for that. I went with SPServices routine to accomplish the same. Thanks for checking back.

  23. I am unable to see the ‘Save Settings’ button when I try to a tooltip using the fftsetup=1 on a custom create entry page. Any ideas would be appreciated.

      1. Hi, My scenario is to implement tooltip on a sharepoint designer customized form. How can I adapt your code on this form to make it working?

  24. Should have read the comments in order to find out that the form field CEWP must not be hidden, thanks for that hint.

    Dynamic Forms + ToolTips work great on SharePoint 2013 as well! Keep up the great work!

  25. Pingback: Dynamic Forms for SharePoint: Now with field tooltip « SharePoint JavaScripts

  26. I ran into this posting and this is exactly what I needed, however, it doesn’t seem to work for me.

    First, I am using SharePoint 2007.

    I’ve added jquery-1.9.1.min, SPJS-FormFieldTooltip.js, and spjs-utility.js to a document library and have the correct references in the CEW script for them. I changed the name for the list to my list name (and left the HELP icon image and the settingListBaseURL = L_Menu_BaseUrl.

    I added a CEW to the NewForm.aspx and pointed the ConentLink to the CEW script (in the same location as the scripts).

    I selected OK and it prompted me to create the list and responded OK.

    But, now when I go into NewForm.aspx?fftsetup=1 I just get the standard looking new form, no place to edit the tool tip like in the picture.

    I ran through this 2X from scratch, and I’m not sure what I’m doing wrong.

    Any ideas?

    Thanks,

    Dave

      1. That was it. Gracias.

        I knew it was something I was doing wrong!

        Thanks,

        Dave

      2. I have an issue with “spjs_wrapSoapRequest” in spjs-utility.js file.. Please suggestion what should I do to make this tool tip working?

        It goes to the error handler and thats the reason i am not able to get the result.. please help..

  27. I tried it with my site.. I guess I am missing something.. I followed all the steps mentioned above, but still not able to get the results.. I had one question, do we need to create a separate List which holds the tooltip data? I have not created that but I know where the error is, I guess.. “spjs_wrapSoapRequest” in spjs-utility.js file.. Please suggestion what should I do to make this tool tip working?

    1. Hi,
      The list is supposed to be created by this solution. If this is not happening, something in your setup must be wrong – you are not supposed to change anything in spjs-utility.js.

      If you have other solutions / scripts in the same page, you may have some interference. Try temporarily removing all other solutions.

      Alexander

  28. Hi Alexander,

    It looks as if this works in SharePoint 2013 as another poster commented that it works however it doesn’t seem to be totally working for me using SharePoint 2013. I’m not using dynamic forms. I’m trying to use this solution on an “NewForm”. I’m using all the files in v1.5. It creates the list the very first time and I can update the tooltips using fftsetup=1. The lists updates after I save the tooltip text. No problems so far. I go back to the “NewForm” and I see the hhelp.gif where it should be. If I hover over it, the cursor changes but no tool tip is displayed. I’ve played around with it for a while and I just don’t know what could be wrong. Any ideas?

    Thanks!

      1. Hi – I have a similar issue as IMB but in SharePoint 2010 where no tooltip is displayed. I added alerts for top and left variables. I got prompts for both when hovering over. What else should I try?

        Thank you!

  29. Thanks for the quick response! The first alert says “199” and the second alert says “36” for the first help image. The remaining help images have the same first alerts “199”. For the second help image, the second alert is “66”. Third second alert is “190” and last second alert is “216”.

    Let me know if you need more details. Thanks again!

    1. Hi,
      This sounds about right. Have you perhaps scrolled down in a long form and the dialog is displayed “above” the screen? – this should not be a problem, I’m just looking for clues.

      Is this a “true” SP 2010 list, or is it maybe an upgraded site from SP 2007? Have the master page been modified?

      Could it be that you have removed the placeholder from the CEWP code? – it is supposed to look like this:

      Alexander

      1. Hi Alexander – Apologies, I just finished reading through the comments above this one. The issue is the same as BobMac, I had hidden the CEWP. >_< I can see the tooltips now. Appreciate your quick responses and the detailed instructions. 🙂

  30. Hi Alexander,

    Thanks for your great work. We’re migrating to SP2013 in a couple of weeks… is there an alternative to “Form Field Tooltip for SharePoint 2007 and SharePoint 2010”?

    Thanks!
    Martin

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.