Display DFFS tooltips in list view on column header hover

[MikeS]

Alexander,

The tooltip function works great on forms. Is there any way to display that same tooltip in the list view when a user hovers on the column header? I realize I may have to add a custom JavaScript call in the various list view pages – but I do that already to get static column headers that don’t roll off the page during a vertical scroll.

I reviewed Show field description in list view column header – updated version, but the last comment indicated a 2013 version was needed. However, I’d rather use the tooltips as the source of the hover text as they are geared to the read-only user while the field descriptions are used as custom field help for editors.

Much appreciated,
Mike

[Alexander Bautz]

Hi,
You can look at this article and see if you can use it: https://spjsblog.com/2015/03/27/spjs-simple-tooltip/

It might be easier to use this example and add your own custom tooltip:
https://www.w3schools.com/css/css_tooltip.asp

Alexander

[MikeS]

I’ve studied the code at https://spjsblog.com/2015/03/27/spjs-simple-tooltip/ as I think that will allow the correct tooltip regardless of the selected view.

However, I’m unsure how to associate the field name(s) shown in the debug view (see attached Figure) with the HTML call:

<td valign="top">Field 1: </td>
		<td valign="top"><input style="width:300px;" type="text">
			<img onmouseover="SPJS_SimpleTooltip.show(this,'helpText1')" onmouseout="SPJS_SimpleTooltip.hide()" onclick="SPJS_SimpleTooltip.click(this)" src="/_layouts/images/hhelp.gif" border="0">
		</td>

I assume I would call the HTML, JS, and CSS from the SharePoint .aspx page but am wondering how to integrate the various SharePoint field names (shown as List view column headers) in the HTML.

Thanks for your help.
Mike

Attachments:

1. 

   List_view_DOM_inspector_to_determine_tooltip_call.png
   

[Alexander Bautz]

Hi,
I haven’t tested it fully, but tested this in the developer console. If you use this to add the help icon to each header:

jQuery("th[role='columnheader'] > div[displayname]").each(function(i,div){
	var dispName = div.getAttribute("displayname");
	console.log(dispName);
	jQuery(div).append("<img style='vertical-align:middle;margin-left:5px;' onmouseover='SPJS_SimpleTooltip.show(this,\""+dispName+"\")' onmouseout='SPJS_SimpleTooltip.hide()' onclick='SPJS_SimpleTooltip.click(this)' src='/_layouts/images/hhelp.gif' border='0'>");
});

Please note that in my list view I didn’t find the same class as you on the th – this mean you might have to change the first line like this:

jQuery("th.ms-headerCellStyleHover > div[displayname]").each(function(i,div){

And edit this variable to hold the tooltip for each of the column display name:

var SPJS_SimpleTooltipContents = {
	"Display name of first column":"<div style='width:200px;'>This is a custom tooltip for field 1<div style='color:red'>You can use HTML</div></div>",
	"Display name of second column":"<div style='width:200px;'>This is a custom tooltip for field 2<div style='color:red'>You can use HTML</div></div>"
};

Alexander

[Author]

Posts