none
CRM Custom Tooltips?

    Question

  • Hi All,

    Does anyone know how to code javascript tooltips in CRM for onfocus, onblur and onmousemove events?  I want to be able to display tooltips over a textbox when a user tries to edit or click in the textbox or when the textbox has focus.

     

    Thanks,

    Jinx'd

    Monday, March 24, 2008 9:32 PM

Answers

  •  

    Hi.

     

    Put this in your onload event.

    The tooltip is positioned at the bottom of the control.

     

    Tell me what you think...

     

    function OnCrmPageLoad()

    {

          AddToolTip( "name" , "ToolTip ToolTip ToolTip ToolTip" );

          AddToolTip( "customertypecode" , "ToolTip ToolTip ToolTip ToolTip" );  

    }

     

    var TooltipPopup = null;

     

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

          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:12px 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();

     

    Cheers,

    Adi

    Tuesday, March 25, 2008 12:13 AM

All replies

  • Monday, March 24, 2008 11:20 PM
  •  

    Hi.

     

    Put this in your onload event.

    The tooltip is positioned at the bottom of the control.

     

    Tell me what you think...

     

    function OnCrmPageLoad()

    {

          AddToolTip( "name" , "ToolTip ToolTip ToolTip ToolTip" );

          AddToolTip( "customertypecode" , "ToolTip ToolTip ToolTip ToolTip" );  

    }

     

    var TooltipPopup = null;

     

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

          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:12px 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();

     

    Cheers,

    Adi

    Tuesday, March 25, 2008 12:13 AM
  •  

    We have a commercial add-in called InLine Help that allows you to create Tool Tips for any CRM form. It doesn't require any programs, is supported and works online, offline and IFD mode for CRM 4.0 on-premises.

     

    Take a look at it at: http://www.crminnovation.com/inline_help.asp

     

    Jerry

    http://www.CRMInnovation.com

     

    Wednesday, December 03, 2008 7:24 PM
  • Adi, when i copy your code and test it, I get an error message that null is null or not an object. Any help is most appreciated.
    Friday, April 24, 2009 9:58 PM
  • Hi,

    I have always just used this approach; can be an alternattive:

    crmForm.all.name_d.title = "Enter legal name for company, i.e. Det Norske Veritas.";
    crmForm.all.name_c.title = crmForm.all.name_d.title;


    Morten
    Friday, April 24, 2009 10:23 PM
  • Hi Jinx'd,

    in my opinion the most easiest way to create a tooptip is to use the (unsupported) title attribute of the entity attribute:

       crmForm.all.name.title = "Help information";

    This is also possible for the label:
       
       crmForm.all.name_c.title = "Help information";

    Best regards,
    Jürgen

    Jürgen Beck

    Dipl. Kfm./Wirtschaftsinformatik
    MVP, MCSD.NET, MCITP DBA, MCDBA, MCSE
    Microsoft Certified Business Management Solutions Professional
    Microsoft Certified CRM Developer
    Microsoft Certified Trainer

    ComBeck IT Services & Business Solutions
    Microsoft Gold Certified Partner
    Microsoft Small Business Specialist

    Developing & Supporting Business Applications from small business to big enterprises covering scores of sectors

    http://www.combeck.de
    Saturday, April 25, 2009 1:20 PM
  • The same code from my blog works. Verify that the field name that you provide to the AddToolTip function is correct.
    e.g. AddToolTip( "<CRM Field Name>" , "My Custom Tooltip" );

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


    http://mscrm4ever.blogspot.com/
    Saturday, April 25, 2009 2:31 PM
  • Hi Adi,

    yes, you are correct. Your code works fine in most situations.

    I just wanted to add a more easy and stable solution.

    Best regards,
    Jürgen
    Jürgen Beck

    Dipl. Kfm./Wirtschaftsinformatik
    MVP, MCSD.NET, MCITP DBA, MCDBA, MCSE
    Microsoft Certified Business Management Solutions Professional
    Microsoft Certified CRM Developer
    Microsoft Certified Trainer

    ComBeck IT Services & Business Solutions
    Microsoft Gold Certified Partner
    Microsoft Small Business Specialist

    Developing & Supporting Business Applications from small business to big enterprises covering scores of sectors

    http://www.combeck.de
  • I folled your simplicity Morten, but used the metadata web service to pull the tool tips from the attribute's description.  That way all the tooltips are easily managable and come from a common source for other data dictionary reports and such.  This may not be the best way to loop though all fields on the form, but it seems to work pretty well.  I had to add a bunch of conditionals  to avoid parsing the xml for a bunch of non existent attributes.  This should be copy and paste if you want to use it.  It gets the entity name from the form property, pulls the meta data, and loops through the fields on the form assigning tooltips from the meta description.

    // ############ Metadata ToolTip Code ###################
    // This is a generic CRM Metadata web service execute function
    function QueryMetadataService(request) { 
    	var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
        xmlhttp.open("POST", "/mscrmservices/2007/MetadataService.asmx", false); 
        xmlhttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8"); 
        xmlhttp.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/crm/2007/WebServices/Execute"); 
        var soapMessage = "<?xml version='1.0' encoding='utf-8'?>" + 
            "<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' " + 
                "xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'>" + 
            "<soap:Header>" + 
            "<CrmAuthenticationToken xmlns='http://schemas.microsoft.com/crm/2007/WebServices'>" + 
            "<AuthenticationType xmlns='http://schemas.microsoft.com/crm/2007/CoreTypes'>" + AUTHENTICATION_TYPE + "</AuthenticationType>" + 
            "<OrganizationName xmlns='http://schemas.microsoft.com/crm/2007/CoreTypes'>" + ORG_UNIQUE_NAME + "</OrganizationName>" + 
            "<CallerId xmlns='http://schemas.microsoft.com/crm/2007/CoreTypes'>00000000-0000-0000-0000-000000000000</CallerId>" + 
            "</CrmAuthenticationToken>" + 
            "</soap:Header>" + 
            "<soap:Body><Execute xmlns='http://schemas.microsoft.com/crm/2007/WebServices'>" + request + "</Execute></soap:Body>" + 
            "</soap:Envelope>"; 
        xmlhttp.send(soapMessage); 
        return xmlhttp.responseXML; 
    }
    
    // This function gets the metadata for the attributes of an entity, then assigns them to the title tooltip
    function MetaToTitleTips(entityName) {
        var request = "<Request xsi:type='RetrieveEntityRequest'>" +
            "<MetadataId>00000000-0000-0000-0000-000000000000</MetadataId>" +
            "<EntityItems>IncludeAttributes</EntityItems>" +
            "<LogicalName>" + entityName + "</LogicalName>" +
            "<RetrieveAsIfPublished>true</RetrieveAsIfPublished>" +
            "</Request>";
        var result = QueryMetadataService(request);
    	
    	for (var i in crmForm.all) {
    		var field = crmForm.all[i];
    		// Avoid errors at all costs, try to use only actual crm fields and not other web form IDs
    		if (field != null && field.id != null && field.id != "" && field.id != "undefined" && field.id.substring(0,1) != "{" && field.id.substring(0,3) != "tab" && field.id.substring(field.id.length-6) != "_ledit" && field.id != "crmTabBar" && field.id != "Notifications" && field.id.substring(0,12) != "notescontrol") {
    			var logName;
    			var idLen = field.id.length;
    			// This gets the id name for _c and _d label elements for the field row/cell
    			if (field.id.substring(idLen-2,idLen-1) == "_") {
    				logName = field.id.substring(0,idLen-2);
    			}
    			else {
    				logName = field.id;
    			}
    			if(document.getElementById(logName) != null) {
    				var desc = result.selectSingleNode("//EntityMetadata/Attributes/Attribute[LogicalName='" + logName + "']/Description/UserLocLabel/Label");
    				if(desc != null) {
    					field.title = desc.text;
    				}
    			}
    		}
    	}
    }
    MetaToTitleTips(crmForm.ObjectTypeName);
    // #####END#### Metadata ToolTip Code #########END#######
    Friday, June 12, 2009 10:08 PM
  • Hi,

    Very good work, I think I'll make a copy.

    To improve performance, you could adjust your function to output a jscript (you must enable/disable it), that you then paste the code your function produce into your form load.

    ... anyway, good work.

    Morten

     

     

    Sunday, June 14, 2009 11:05 PM
  • Nice script but does not work well with lookups :-(

    Tuesday, August 03, 2010 8:17 AM
  • Hi

    With the code Adi provided I exprerienced the problem, that the popup does not move to the new position, if the scroll bar (CRM 2011) is displayed and used to scroll down.

    I fixed this by displaying the popup with coordinates relative to the originating control and use the control as last param of TooltipPopup.show(.......):
          //var Position = GetControlPostion ( control );        
    var Left = 1;
     var Top = control.offsetHeight + 1;
     TooltipPopup.show( Left , Top , Width , Height , control);

    R.eto Scherre.r

    Monday, November 21, 2011 9:19 PM