Making tooltips work in Firefox, Chrome, Safari, Opera et al... in Sage CRM v7.1 SP1 and earlier

Hints, Tips and Tricks

Technical Hints Tips and Tricks that cover customization and development using Sage CRM. API usage and coding are covered.

Making tooltips work in Firefox, Chrome, Safari, Opera et al... in Sage CRM v7.1 SP1 and earlier

  • Comments 1
  • Likes

Note: This article refers to versions of Sage CRM earlier than Sage CRM v7.1 SP2.  Sage CRM v7.1 SP2 adds support for Firefox, Chrome and Safari browsers and tooltips appear automatically in the screens.

Throughout the system, in different screens, Sage CRM uses tooltips on hyperlinks.  For example in the OpportunityList screen you can see tool tips on on the tab customization button at the top right

and when you hover over the status of the opportunity.

This hyperlinks are produced by ALT properties on the HTML <a> tags.  They show up in Internet Explorer as tooltips but really the ALT property is supposed to be used to returns alternate text to be displayed if a browser cannot show an image.  The generally preferred property that produces a tooltip for all modern browsers is TITLE.

To add TITLE tooltips to a screen we have to make the change using a client side script contained in the custom content.  The script has to be bound to the windows load event.

Previously when I have only been writing about Internet Explorer I have only used the window.attachEvent() method. To allow me to attach my code to the load event of the screen other browsers I need to use window.addEventListener()

I added the following code into the custom content box of the OpportunityList block.

<script>
if (window.addEventListener)
{
//firefox way of binding an event
window.addEventListener("load", dothis, false)
}
else
if (window.attachEvent)
{
//IE exclusive method for binding an event
window.attachEvent("onload", addToolTip)
}

function addToolTip()
{
var all = document.getElementsByTagName("*");
for(i=0;i<all.length;i++)
{
if (all[i].alt)
{
all[i].title = all[i].alt;
}
}

}
</script>

First the script is checking which binding method to use.  Within the function addTooltip() I have used the statement

var all = document.getElementsByTagName("*");

because the document.all[] array is Internet Explorer specific.  The code then cycles through the elements and where an element has an "alt" property defined it sets the "title" property.

Tooltips will now appear with Firefox screens

and other browsers like Google Chrome

Comments
  • Code error:

    window.addEventListener("load", dothis, false)

    should read:

    window.addEventListener("load", addToolTip, false)