Adding tooltips to HTML sections

[nils.enhoerning]

Hi 🙂

I have a colleague who has replaced all of her field labels with elaborate html sections, and now wants to use the tooltips assigned to each field.

Unfortunately these tooltips seem to be attached to the field labels, is there any way we can pull those in via script in the html sections, or should we look at doing it manually with our own scripts? Would prefer to use the dffs native parts if possible.

Any ideas how to best do that? 🙂

Best regards,

Nils

[Alexander Bautz]

Hi,
Can you show me the code used to add the HTML to the label?

Most likely you can keep the DFFS tooltip if you target not the “td.ms-formlabel”, but “td.ms-formlabel .ms-standardheader”.

Alexander

[nils.enhoerning]

She has not replaced it via code, but by using side by side field settings to hide the field label, and used html sections to replace the field name with an elaborate heading.

i.e. the field name is PhoneActive, while the label she uses is <h4>Are there still active phones in your office?</h4> as an example. There are some longer ones.

Is there any way to tap into your tooltip adding function to add the tooltip from the PhoneActive field to the html section? I.e. something more elegant than manually grabbing the tooltip’s html from the hidden label and adding it to the html section? 😀

My next steps are probably going to be implementing that, but since it will likely happen on dozens of columns on over 20 lists figuring out how to do this with a little code as possible will save me a lot of time 🙂

is there some way to trick the tooltip function into thinking that the custom heading is the real label? How is it finding and adding the tooltips, if I knew that I could probably just inject what your script is looking for in the html and the tooltip will be added by your script 😀

[nils.enhoerning]

After a bit of poking I got it to sort of work by grabbing the html for the tooltip from the hidden tooltip in the background with some jquery:

1. create a target span in the html tooltip, where the custom attrivute targettooltip is the field internal name of the orginal column with the tooltip:

</br><h4>Please select the sites you are providing the information for below: <span class = "customTooltipFromDffs" targettooltip = "Sites"></span></h4></br>

2. run this function on form load in a rule:

function assignCustomTooltips(){
	 var customTooltipTargets = $("span.customTooltipFromDffs");
	 customTooltipTargets.each(function(index, element){
		 var tooltipTargetInternalName = $(this).attr("targettooltip")
		 //console.log(tooltipTargetInternalName);
		 var toolTipHtml =$("div#tooltip_" + tooltipTargetInternalName);
		 $(this).html(toolTipHtml); 
	 });
}

Result in attachment. Will likely have to add some error handling for graceful failure etc. Still I need to figure out the best way of aligning the tooltip to the end of the text of the H4 elegently somehow, but that is a problem for the next attempt 🙂

• This reply was modified 7 years, 7 months ago by nils.enhoerning.

Attachments:

1. 

   tooltipActive.jpg
   

[Alexander Bautz]

Hi,
Instead of using hiding the field label you can test with this code in “Custom JS” in the form you want to change the form label in:

function addCustomHeader(fin,str){
    var width = $("td.ms-formlabel").width();
    $("#dffs_"+fin).find("h3, .ms-h3").html("<div style='width="+(width-20)+"px;white-space:pre-wrap;'>"+str+"</div>");
}

Use it like this:

addCustomHeader("FieldInternalNameOfColumn","this is the new label for the column");

Let me know how this works out.

Alexander

[Author]

Posts