Saturday, June 21, 2008

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

4 comments:

Carsten Groth said...

Nice script, but on lookups the tooltip is shown right below the lookup icon instead of the attribute field. So you can´t read the lookup.

Adi Katz said...

This is just an example. You can indentify the field type and decide where to position the tooltip.

If you’re looking for a more robust solution take a look at our tooltip wizard or crminnovetion solution.

Jessica said...

It's weird. I tried putting this code into the onload for the form. When the form loads I get:

There was an error with this field's customized event

Field: Window
Event: on Load
Error: 'Null' is null or not an object.

E said...

Works great!

However I noticed that when I use it for tabs, the controlID tab2Tab (or tab1Tab, etc) provides the specified tooltip when you mouse over the top of the tab but only where there's no text.
When you mouse over the text, it says "undefined".

Any advice for how to modify the "undefined" tooltip?