By request I have “ripped” the DFFS tooltip from DFFS. This code can use to create a custom tooltip with the same style and function as in DFFS. This means that you can have a hover-over tooltip that sticks if you click the hover-image.

Take a look at it, and familiarize with the code before asking questions.

The tooltip text or HTML is added to the variable “SPJS_SimpleTooltipContents”, and the “key” is used in the image “onmouseover” to pull in the correct tooltip.

<style type="text/css">
div.SPJS_SimpleTooltipPlaceholder img{
	cursor:pointer;
}
#SPJS_SimpleTooltipPlaceholder{
	/*width:350px;*/
	white-space:normal;
	background-color:#E7ECEF;
	border:1px #9F9E9C solid;
	display:none;
	font-size:11px;
	font-weight:normal;
	max-width:500px;
	z-index:1001;
}
div.SPJS_SimpleTooltipHolderHead{
	height: 16px;
	padding:1px;
	border-bottom:1px silver solid;
	background-color:#0072C6;
}	
div.SPJS_SimpleTooltipHolderClose{
	float:right;
	width: 16px;
	height: 16px;
	cursor:pointer;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAB5SURBVDhPzZJBDoAgEAN5CG/jF74fGewigSUcOOgkTaTtrhoN/yHnHIuSFGU3djkFAuMqaiWu5RlJ0QvmkzXqEqkfBneBV+TsefMrAIEKK9bDBgUVR/bDQEnlkaO7G+slBCr0cPa8eUkxjz/j8Y9EiSVoesRd/hUh3IlkrlzxjRMpAAAAAElFTkSuQmCC);
}
</style>

<script type="text/javascript">
var SPJS_SimpleTooltipContents = {
	"helpText1":"<div style='width:200px;'>This is a custom tooltip for field 1<div style='color:red'>You can use HTML</div></div>",
	"helpText2":"<div style='width:200px;'>This is a custom tooltip for field 2<div style='color:red'>You can use HTML</div></div>"
};

var SPJS_SimpleTooltip = {
	"data":{
		"isSP13":typeof _spPageContextInfo !== "undefined" && _spPageContextInfo.webUIVersion === 15 ? true : false
	},
	"show":function(elm,key){
		var p = $(elm).position(), l = {};
		if($("#SPJS_SimpleTooltipPlaceholder").length === 0){
			$("body").append("<div id='SPJS_SimpleTooltipPlaceholder'></div>");
		}
		$(elm).after($("#SPJS_SimpleTooltipPlaceholder"));
		$("#SPJS_SimpleTooltipPlaceholder").html("<div style='padding:3px;'>"+(SPJS_SimpleTooltipContents[key] !== undefined ? SPJS_SimpleTooltipContents[key] : "The tooltip for key \""+key+"\" was not found.")+"</div>").attr("pin","0").css({"position":"absolute","left":p.left+15});
		// Check left pos
		l.l = p.left+30;
		l.tw = $("#SPJS_SimpleTooltipPlaceholder").width();
		l.ww = $(window).width();
		if(l.l + l.tw > l.ww){
			$("#SPJS_SimpleTooltipPlaceholder").css("left",(p.left - (l.l + l.tw - l.ww)));
		}
		$("#SPJS_SimpleTooltipPlaceholder").stop(true,true).fadeIn(200);
	},
	"click":function(elm){
		if($("#SPJS_SimpleTooltipPlaceholder").find("div.SPJS_SimpleTooltipHolderClose").length === 0){
			$("#SPJS_SimpleTooltipPlaceholder").attr("pin","1").prepend("<div class='SPJS_SimpleTooltipHolderHead'><div class='SPJS_SimpleTooltipHolderClose' onclick='SPJS_SimpleTooltip.hide(true);'></div></div>");
		}
	},
	"hide":function(c){
		if($("#SPJS_SimpleTooltipPlaceholder").attr("pin") !== "1" || c){
			$("#SPJS_SimpleTooltipPlaceholder").attr("pin","0").stop(true,true).fadeOut(100);
		}
	}
};

</script>

<!-- Example HTML -->
<table cellpadding="0" cellspacing="0">
	<tr>
		<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>
	</tr>
		<tr>
		<td valign="top">Field 2: </td>
		<td valign="top"><input style="width:300px;" type="text">
			<img onmouseover="SPJS_SimpleTooltip.show(this,'helpText2')" onmouseout="SPJS_SimpleTooltip.hide()" onclick="SPJS_SimpleTooltip.click(this)" src="/_layouts/images/hhelp.gif" border="0">
		</td>
	</tr>
</table>
<!-- Example HTML -->

PS: It’s the <img> tags that calls the tooltip, the other HTML is for demonstration only.

I hope you can make use of this code.

Alexander