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 🙂
