SPJS Simple tooltip

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.

The code

<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>

This HTML code shows you how to use the tooltip

<!-- 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

by Alexander Bautz via SharePoint JavaScripts