ToolTip: Working for Some Fields, Not Others, On The Same Form

Nov 3, 2014 at 1:42 AM
This is odd and I've tried everything I can think of, but this one has me flummoxed.

I am using the Toolkit for Tooltips. I have it set to be used on two fields: one is a free text, and the other is a Boolean.

Using the following XML (names and words changed to protect the innocent):
<help> 
    <entity name="contact"> 
        <attribute name='new_myfield_short_text'> 
            <shorthelp>Some ToolTip</shorthelp> 
        </attribute>
        <attribute name='new_myfield_bool'> 
            <shorthelp>Some other ToolTip</shorthelp> 
        </attribute> 
    </entity>
</help>
The ToolTip appears properly for the first field, but not the 2nd (boolean) one, but for the one with no custom text, I still get the question-mark icon. So I know I have not fat-fingered the field name.

I tried some obvious stuff like fiddling with quote formats, copy and pasting the field name from the documentation generator to be very sure I've got it right, copy/pasting the original XML example and starting over, swapping the order of the fields in the XML, etc.

I know there is a 2nd lookup field that impacts how this is used on Lookups. Is that true for Booleans too?

I even F12-traced the code to see that all the appropriate values are being passed through properly.

Thanks in advance for any help.
Coordinator
Nov 6, 2014 at 3:52 PM
As the method is not supported in CRM 2011. The way how CRM rendered the field will be different as well.

For your case, it may be very likely caused by the way how the boolean field is displayed.

You may need to check the DOM elements and see what is the cause of the problem.

Kind Regards,
Jaimie
Feb 23, 2015 at 11:51 PM
For the benefit of anyone coming by later, I did determine that you need to use the logical name of the field in your XML, not the schema name. In other words, it needs to be all lower case.
Feb 24, 2015 at 8:03 PM
Edited Feb 24, 2015 at 8:05 PM
To come back to this one more time... I looked at the DOM and the two fields. It appears the Toolkit is inserting the code properly but is being rendered inconsistently.

This one works:
<label for="new_internationalphonenumber">
   International Phone Number
   <img width="16" height="16" id="img_new_internationalphonenumber" style="display: inline;" alt="Use this field for numbers that are not in North American format." src="/_imgs/ico/16_help.gif" />
   <div id="help_new_internationalphonenumber" style="visibility: hidden; position: absolute;">: Use this field for numbers that are not in North American format.</div>
</label>
But this one doesn't:
<label for="new_caslconsentfororganization">
   CASL Consent for Organization
   <img width="16" height="16" id="img_new_caslconsentfororganization" style="display: inline;" alt="The quick brown fox jumped over something something" src="/_imgs/ico/16_help.gif" />
   <div id="help_new_caslconsentfororganization" style="visibility: hidden; position: absolute;">: The quick brown fox jumped over something something</div>
</label>
"doesn't work" meaning, I get the round help icon but the tooltip text doesn't appear onmouseover, just the field label "CASL Consent for Organization".

The thing that's maddening is that even though the formats for the label are precisely the same, the first ToolTip works fine but the 2nd one doesn't appear. It's happening on both IE and Firefox.
Feb 24, 2015 at 10:35 PM
Edited Feb 24, 2015 at 10:39 PM
So to keep answering my own question, the issue seems to be that the text rendered when the user mouses over the toolTip is the title tag of the parent <TD> tag of the label.

I found this problem only existed on Two Options fields rendered as radio buttons. In those cases, the parent TD tag didn't have a title.

So I fixed this by explicitly clobbering the title tag of the <TD> using jQuery 1.6+'s .prop method. See the additional code I added at the bottom.
        function registerHelp(entity, attr, txt) {
            var obj = jQuery('#' + attr + '_c').children(':first');
            //var obj = document.getElementById(attr+'_c').children[0];

            if (obj != null) {
                var html = '<img id="img_' + attr + '" src="/_imgs/ico/16_help.gif" alt="' + txt + '" width="16" height="16"></img><div id="help_' + attr + '" style="visibility: hidden; position: absolute;">: ' + txt + '</div>';
                jQuery(obj).append(html);
                
                //20110909 GP: added line to hide/show help image
                jQuery('#img_' + attr).css('display', (bDisplayImg) ? 'inline' : 'none');
            }
            
            // Added code. pTD = parent TD tag - this explicitly sets the title of the parent <TD> tag of the field.
            var pTD = jQuery('#' + attr + '_c');
            if (pTD != null)
            {
                jQuery(pTD).prop("title",txt);
            }
        }
Marked as answer by BobHatcher on 2/24/2015 at 2:36 PM