How to: JSLink, show multiple people field on a tooltip.

Perhaps one of the most useful features within Sharepoint 2013 are Display Templates  (aka. CSR or JSLink).

In my current scenario, I have a list called “projects” with a field called “Project Team”, this field is is Multiple People Field, and by default sharepoint renders in the list views with one new line per person.

This can be very annoying, especially if you have 100 people in your field value.

How to fix this? At least for my scenario, I can join all values together and put them on a tooltip.  Code is below and I consider it to be self explanatory.

(function () { 

// Create object that have the context information about the field that we want to change it's output render 
var projectTeamContext = {}; 
projectTeamContext.Templates = {}; 
projectTeamContext.Templates.Fields = { 
// Apply the new rendering for Body field on list view 
"Project_x0020_Team": { "View": ProjectTeamTemplate } ,
}; 

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(projectTeamContext); 

})(); 


// This function provides the rendering logic 
function ProjectTeamTemplate(ctx) { 

var projectTeamValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 

//newBodyvalue should have the list of all display names and it will be rendered as a tooltip automaticlaly
var bodyValue = projectTeamValue.map(function(person) {
return person.value;
}).join(", ");

var newBodyValue = bodyValue; 

if (bodyValue && bodyValue.length >= 100) 
{ 
newBodyValue = bodyValue.substring(0, 100) + " ..."; 
} 

return "<span title='" + bodyValue + "'>" + newBodyValue + "</span>"; 

}

Originally posted here:

http://www.luisevalencia.com/2014/10/07/how-to-jslink-show-multiple-people-field-on-a-tooltip/