SharePoint 2013 List - Tooltip over Items

Question

We have large SharePoint lists with lots of columns. Our users are forgetting which cells they are viewing because after scrolling the headers disappear (no way to freeze headers like in Excel).

We want to try adding tooltips to the cell items so when they hover over it will display a tooltip with the column name.

Has anyone ever tried doing this before?

I have the following code which works initially on the load but stops working after the user sorts, filters or switches the list into Edit mode:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
jQuery(
function() 
{
    $('td').hover
    (
    function() 
    {
        var idx = jQuery(this).parent().children().index(jQuery(this));
        jQuery(this).attr('title',jQuery(this).parent().parent().parent().find('th').eq(idx).text());
        jQuery('div.ms-core-brandingText').html(jQuery(this).parent().parent().parent().find('th').eq(idx).text());
    }
    )
}
);                         
</script>

Answer 1

Your code stops working because SharePoint reloads the list content. This is a common issue when adding client side scripts to SharePoint pages.

First, you should actually be able to render a view with frozen headers. Right, it doesn't come out of the box, but there are third party datatable tools available.

Another option is to include your code via the Client Side Rendering option. This is a broad topic, so probably the first step would be to google it.

Answer 2

Okay, getting closer, using CSR instead of just jQuery. This works but needs each field specified manually. Looking for a way to apply this to every field in the view.

<script type="text/javascript">
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        Templates: {
            Fields: {
                'Comments': {
                    'View': function (ctx) {
                        return String.format('<span title="{0}">{1}</span>', this.FieldTitle, ctx.CurrentItem.Comments);
                    }
                },
                'Name': {
                    'View': function (ctx) {
                        return String.format('<span title="{0}">{1}</span>', this.FieldTitle, ctx.CurrentItem.Name);
                    }
                }
            }
        }
    });

Answer 3

It occurs since when filtering/sorting is getting applied the List View is reloaded.

How to hover List Item in SharePoint 2013

The following function could be used for hovering List Item cells in SharePoint 2013:

function hoverListItems()
{
  $('tr.ms-itmhover td').hover(
    function() {
       var $td = $(this);
       var $th = $td.closest('table').find('th').eq($td.index());
       $td.attr('title',$th.text());
    }
  );  
}

Since in SharePoint 2013 Client-Side-Rendering (CSR) is the default rendering mode, the example below demonstrates how to register hoverListItem function using OnPostRender event

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
   OnPostRender: function() { 
       hoverListItems(); 
   }
});

Note: using the specified technique List Item hover will also work after sorting/filtering is applied.

References

Introduction to Client-Side Rendering in SharePoint 2013

Answer 4

Tool-Tip Work-around:

The solution I have been using is a simple, non-html solution. I simply create a link to an item; insert it's own address (so that it doesn't go anywhere); then under the new LINK tab type the tip you want in the Description box.

save the page then try mousing over your new link, voilà

Hope that helps some!