CRM Custom Tooltip

Here is a simple tooltip solution I posted on ms forums.
In my opinion Microsoft CRM is more of a “search what you need” then an “achieve your goal” application So a well designed tooltip infrastructure is a good place to start.

In my case the tooltip text is hard coded. A better solution would be to load the text from the server using an Ajax call, or create a new “ntext” attribute on the form and read It’s value when the form loads.

The tooltip is positioned at the bottom of each control. Tried moving it around but it didn’t fit the page. Hope you find it useful.

This is how the tooltip looks like
tell me what you think…

Insert the code inside the entity onload event.

var TooltipPopup = null;

function OnCrmPageLoad()
{     
    AddToolTip( "name" , "The name of the account…" );     
    AddToolTip( "customertypecode" , "ToolTip ToolTip ToolTip ToolTip…" );
}

function AddToolTip( controlId , toolTip )
{     
 var control = document.getElementById( controlId );     
     control.ToolTip  = toolTip;     
     control.attachEvent( "onmouseover"  , ShowToolTip );     
     control.attachEvent( "onfocus"      , ShowToolTip );     
     control.attachEvent( "onmouseout"   , HideToolTip );
}

function ShowToolTip()
{     
 var control = event.srcElement;           
     TooltipPopup = window.createPopup();     
 // Single line.      
 var ToolTipHTML  = "<DIV style='width:100%;height:100%;border:1px solid gray;background-color: #d8e8ff;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#cecfde);padding-left:2px;font:12 px tahoma'>"+control.ToolTip+"</DIV>";          
     TooltipPopup.document.body.innerHTML = ToolTipHTML;     
 var Width  = control.offsetWidth;     
 var Height = 53;     
 var Position = GetControlPostion ( control );
 var Left   = Position.X + 1;
 var Top    = Position.Y + 1;
     TooltipPopup.show( Left , Top , Width , Height , null );
}

function GetControlPostion( control )
{     
 var Position = new Object();     
 var controlHeight = control.offsetHeight;     
 var iY = 0, iX = 0;     
 while( control != null )     
 {           
  iY += control.offsetTop;
  iX += control.offsetLeft;
  control = control.offsetParent;
 }     
 Position.X = iX + screenLeft;     
 Position.Y = iY + screenTop + controlHeight;     
 return Position;
}

function HideToolTip()
{     
 if( TooltipPopup )         
  TooltipPopup.hide();
}

OnCrmPageLoad();