Edit the title property of a field to add custom tooltip

29.10.2009 Update: I have written a new article on how to add HTML-style tool tip – read it here.


I got a request for a method of adding a custom mouse-over tool tip on a field in a SharePoint form. Here is a quick example.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

Add a CEWP below your list-form like this:IMG

And add this code:
[javascript]
<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
fields = init_fields();

$(fields[‘Title’]).find(‘input’).attr(‘title’,’This is a new mouse-over tooltip’);

function init_fields(){
var res = {};
$("td.ms-formbody").each(function(){
if($(this).html().indexOf(‘FieldInternalName="’)<0) return;
var start = $(this).html().indexOf(‘FieldInternalName="’)+19;
var stopp = $(this).html().indexOf(‘FieldType="’)-7;
var nm = $(this).html().substring(start,stopp);
res[nm] = this.parentNode;
});
return res;
}
</script>
[/javascript]

The tooltip should look like this:
IMG

Ask if this example is not enough.

Alexander

47 thoughts on “Edit the title property of a field to add custom tooltip”

  1. Great, this is very clean and simple. Using the title tag for the field. How can we convert this to build a true tool tip that is customizable, and we get it on mouse over of the label also?

  2. Yes I remember that post. another solid hit. I have been trying to build a tool tip that you could customize the terxt, by adding color for formating the text. Something you could set a position of the text, but not get in the way of typing in the field. Also maybe make it not on mouseove. but adding a small image that can be clicked for details and have the popup with the text. The best case would be to have the ability to pull the tooltip text from another list. but for now I am just trying to create a customizable tooltip with color format and position.

  3. Hi Alexander,

    how can i display the tooltip for sahrepoint calendar. i.e i need to dispaly the mouse over message for sharepoint calendar event item.

    any way to do that?

    Thanks
    Amit

  4. Hi Amit,
    What kind of information do you want to display in the tooltip? – is it information from the list item itself or some kind of generic information?

    Alexander

  5. Hello Alex.
    You have great work and I am looking forward to utilizing your code. My request is similar to Amit’s in that I have a table with a title and message column. On the “dashboard” page, I am only displaying the title column and would like to have a tooltip which would display the content of the message column which corresponds to that item. Please let me know if you have a solution for this.
    Thanks again!
    Alex

  6. Create the following column as suggested:
    Identifier
    DisplayText
    ToolTip
    Description
    Then I created 3 new items in MouseOverHTMLTooltipResources list as follows

    Title
    Choices
    AnotherChoiceField

  7. Hi Alex. Have a question for you on your tooltip tool… Does this work for SharePoint lists outside of edit mode? In other words, if I have my List sitting on a site page, can I configure this to show tooltips when hovering over a Field in a row?

  8. Hi Alex,

    I am a newbie to javascripts. Can you help me in understanding this:
    $(fields[‘Title’]).find(‘input’).attr(‘title’,’This is a new mouse-over tooltip’);

    I know the first ‘Title’ field refers to FieldInternalName. What does the second attribute ‘title’ refers to? Can you please explain? I am trying to implement this code to my sharepoint custom List. Need help badly.

    Thanks in Advance.

  9. Hmm…I am still tying to understand. Suppose, If I have a colum named “Detailed Status” and it is a Textarea, How does this go?
    $(fields[‘Detailed_x0020_Status’]).find(‘input’).attr(‘title’,’Change of text’); ? It does not work. Please help.

    1. Thats because a textara is not an input tag. Try using the jQuery selector :input read more here

      Like this: $(fields[‘Detailed_x0020_Status’]).find(‘:input’).attr(‘title’,’Change of text’);

      Alexander

  10. I tried the following:
    $(fields[‘Detailed_x0020_Status’]).find(‘:input’).attr(‘title’,’Change of text’);
    $(fields[‘Detailed_x0020_Status’]).find(‘textarea’).attr(‘title’,’Change of text’);
    Nothing works…? I have the exact same code as you have written in your article. But with the column datatype is Multi line text. Please help.

    BTW, Thank you sooo much for the quick reply.

  11. Yes Alex, I did put the CWEP in the bottom of the list and yes it is a standard sharepoint form. I created a new custom list and trying the code in Newform.aspx

    1. RTE is another story – this is not a textarea:
      $(fields[“MultiLineText”]).find(“.ms-rtelonger”).attr(“title”,”testing”);

      Alexander

    1. setTimeout(function(){ $(fields[“MultiLineText”]).find(“.ms-rtelonger”).attr(“title”,”testing”); },1000);

      The textarea is rendered in an iframe – messy shit. By delaying the function one second it should work.

      Alexander

  12. Hi Alex,

    Thank you very much.. I don’t know what happened. It is working now. Although I have another issue now. I have multiple Single line of text, dropdown fields and Rich Text Areas. Something like this :
    $(fields[‘Title’]).find(‘input’).attr(‘title’,’Enter a title’);

    $(fields[‘Abbreviated Status’]).find(‘input’).attr(‘title’,’Enter Status’);

    It overrides “Enter a Title” and displays “Enter Status” when i hover over Title. How do I do it with “If conditions”?

    1. Abbreviated Status is not a correct FieldInternalName. I believe a wrong FieldInternalName will result in all filed having the same title.

      Alexander

  13. Hello,

    i tested the solution and it works fine. I’ve two short questions. Is it possible to show the “tooltip” a little bit longer (maybe 2-3 seconds)?
    Our tooltip title have the number 10 in it. But not the number is shown, there is a symbol. How can i “fix” this?

    Hope you’ll help me a little bit.
    Thanks in advance

Leave a Reply