Form modification, Javascript, SharePoint

Edit the title property of a field to add custom tooltip

67 Comments

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:

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

The tooltip should look like this:
IMG

Ask if this example is not enough.

Alexander

67 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?

  3. 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.

  6. 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

  7. 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

  9. 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

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

    Title
    Choices
    AnotherChoiceField

  12. 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?

  14. 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.

  15. 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

  16. 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.

  17. 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

  24. 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

  28. 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

  30. Hi Alex,
    I am trying to add a tooltip within a html table, on one particular cell, from a custom list field I’m using sp 2013, and haven’t had any luck sifting through posts/responses. In the jquery, I have this:

    if (listItem.Title === “customehover”) {
    $(“#customhoverMouseover”).attr(“title”, listItem.75_wq);

    For the cell, I have:

    My Table Cell

    When the Snippet is saved, and the page is live, there is no tooltip that appears. Do you have any advice, or a page you can point me at to read up more on it? Thanks in advance!

    1. Side note, the extra “e” in “customehover” isn’t the issue, that was a slip of the finger. 🙂

      and the table cell didn’t seem to post. Let me add some whitespace to it and leave off the end …

      td >Subjective< / td

  32. Not sure how the rest of your code looks, but try using this above your current line to see if it actually finds the item and that your tooltip actually exist:

    console.log(jQuery("#customhoverMouseover").length);
console.log(listItem.75_wq);

    It should show “1” and the content of your tooltip.

    Alexander

  35. script language=”javascript” type=”text/javascript”

    $(document).ready(function ()

    var timeFrameRequestUrl = _spPageContextInfo.webAbsoluteUrl + “/_api/web/lists/getbytitle(‘MyCustomList’)/items”;

    $.ajax(
    url: timeFrameRequestUrl,
    method: “GET”,
    headers:
    accept: “application/json;odata=verbose”
    }
    }).done(function (response) {
    console.log(response);
    response.d.results.forEach(function (listItem) {

    if (listItem.Title === “customhover”)
    $“#customhoverMouseover”).attr(“title”, listItem.75_wq)

    Don’t be alarmed by the missing <, (, or {. Trying to get it to show the code.

  36. I think what throws me is that with the same setup, I am calling values to input into other cells (which functions well), by changing the language from attr.(‘title’, listitem) to text(listitem). It’s this one feature that doesn’t seem to work. I don’t know what else I can look for, or if there is another way to achieve the same outcome.

  37. Hard to tell without looking at the full code, but my guess is that you haven’t inserted the “customhoverMouseover” placeholder in your page when you try to modify it. Also, if listItem.75_wq returns as undefined you must look at the data your function returns in 

    console.log(response);

    Does it have a property named 75_wq?

    Look here to learn how to post code in comments: https://spjsblog.com/2010/01/08/how-to-post-code-in-comments/

    Alexander

  38. I’m not very experienced with jquery (or html really for that matter). Not sure about the placeholder, but I will go look that up now and see if I can figure anything out. The code I’m using is below. I really appreciate your feedback this far!

    https://code.jquery.com/jquery-2.2.4.min.js

    <html>

    <table id=”myHTMLTable” cellspacing=”0″ cellpadding=”0″ width=”100%” align=”center” border=”0″>

    <thead>
    <tr style=”height:70px”>
    <th>Table Title</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><div id=”customhoverMouse” title=””>Cell Content</div></td>
    </tr>

    </tbody>
    </table>

    <script language=”javascript” type=”text/javascript”>

    $(document).ready(function () {

    var timeFrameRequestUrl = _spPageContextInfo.webAbsoluteUrl + “/_api/web/lists/getbytitle(‘MyCustomList’)/items”;

    $.ajax({
    url: timeFrameRequestUrl,
    method: “GET”,
    headers: {
    accept: “application/json;odata=verbose”
    }
    }).done(function (response) {
    console.log(response);

    response.d.results.forEach(function (listItem) {

    if (listItem.Title === “customhover”) {
    $(“#customhoverMouseover”).attr(“title”,
    listItem._75_wq);
    }
    });
    })
    </script>

  39. In regards to the placeholder, if I’m understanding it correctly, I have tried using one. In the cell, I use title=. If I put, say, =”placeholder” and run the code it will have a tooltip on that cell, but it will say placeholder, it doesn’t change it to the value that is being pulled from the list item. And I am positive that is the correct guid from the list column, as well as the row value.

    When the page is loaded, in the results on the console, the metadata does show all the correct info under the ParentList for the custom list information for that particular row.

  40. I tidied up the code a bit and added some console.log lines – try it and see if it makes any difference:

    jQuery(document).ready(function () {
    var timeFrameRequestUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web / lists / getbytitle('MyCustomList')/items";
    jQuery.ajax({
        "url": timeFrameRequestUrl,
        "method": "GET",
        "headers": {
            "accept": "application/ json; odata=verbose"
        }
    }).done(function (response) {
        console.log(response);
        jQuery.each(response.d.results, function (i, listItem) {
            console.log(listItem);
            if (listItem.Title === "customhover") {
                console.log(listItem._75_wq);
                console.log(jQuery("#customhoverMouseover"));
                jQuery("#customhoverMouseover").attr("title", listItem._75_wq);
            }
        });
    });
});

  41. We have progress!!!! So I cleaned up the code with your suggestions, but it was still yielding the same results. So while looking on the console, the column was listed with a ‘OData_’ in front of what I was seeing from the list settings. So I figured for the heck of it, I’d throw that in the code. It now doesn’t show up undefined! It actually lists the value from the list in the console. BUT…it still doesn’t display it as a tooltip. But at least I know the value is there, which is huge!

  45. I don’t believe it is a DFFS. On the blank SP page, I inserted Web Part > Media and Content > Script Editor. And then just added straight code to the snippet.

Leave a Reply

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