Tooltip on Multi-Select Checkbox Item

[Kasey]

Is it possible to tie a tooltip via custom js to a specific option in a choice field that is set to multi-select with checkboxes?

[Alexander Bautz]

The built in DFFS tooltip can only target the fields, but I created a standalone spin-off here: https://spjsblog.com/2015/03/27/spjs-simple-tooltip/

If you insert the CSS code in Custom CSS like this:

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);
}

And then add the JS code to Custom JS like this:

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);
		}
	}
};

You can add your custom tooltip text in an object like this in Custom JS:

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>"
};

Finally you insert the tooltip trigger (question mark image) like this:

$("#dffs_MyMultichoiceField")
    .find("input:checkbox:eq(2)")
    .next()
    .after("<img style='vertical-align:middle;margin-left:6px;' onmouseover='SPJS_SimpleTooltip.show(this,\"helpText1\")' onmouseout='SPJS_SimpleTooltip.hide()' onclick='SPJS_SimpleTooltip.click(this)' src='/_layouts/images/hhelp.gif' border='0'>");

The selector looks at a multichoice field named “MyMultichoiceField” and finds the third checkbox using the selector “input:checkbox:eq(2)” – 0 indexed so 2 is the third checkbox.

Hope you can use this example.

Best regards,
Alexander

[Author]

Posts