Monday, November 29, 2010

MSCRM: Adding a Tooltip to a Custom Field

Tooltips are small boxes in Microsoft Dynamics CRM 4.0 which contain a brief message that explains the field. It appears below the label of a field on the MS CRM forms when the pointer of a mouse passes over or rests on that label and which contains a brief text message identifying or explaining the object. When the pointer moves away from the label the tooltip disappears.

Tooltips are available on every field on a MS CRM form. The tooltips that come with the product show the text of the label. We can change the contents of the current tooltips. The code below can be inserted in the On_Load function of the form and the tooltips will be added or modified.

Below is the code to add a tooltip to a new custom field on the Account form – “new_customernumber”. The AddToolTip function is called with the field name and the contents of the Tooltip.

var TooltipPopup = null;
AddToolTip( "new_customernumber" , "Customer number is assigned when first PO is created.");

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 = "
"+control.ToolTip+"
";

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

2 comments:

Andriy a33ik Butenko said...

Hello.
May be it would be correct to post reference to author of the code:

http://mscrm4ever.blogspot.com/2008/06/crm-custom-tooltip.html

Kristopher Krost said...

Thanks for sharing , this is prefect for me because I am trying to find more sources to get inspired.I appreciate you taking the time to make this for me.
student retention crm
student enrolment software.
crm for higher education