Hilfetext auf VisualForce

Nach einem langen und erholsamen Urlaub in Andalusien holt die Realität schnell ein, und nun beschäftige ich mich wieder mit Salesforce, statt "Sandburgbauen".

Auf einer VisualForce Page möchte ich die gelben Fragezeichen-Icons mit Hilfetexten implementieren, z.B. das Feld "Phone" aus dem "Contact".

Folgende Möglichkeiten stehen dabei zur Verfügung:
1) Salesforce Standard

<apex:pageBlockSectionItem HelpText="{!$ObjectType.Contact.fields.Phone.inlineHelpText}">

  <apex:outputLabel value="{!$ObjectType.Contact.fields.Name.label}" />

  <apex:inputText value="{!Contact.Phone}"/>

</apex:pageBlockSectionItem>

Vorteil: wenig Code, Updatesicherheit

2) HTML
Manchmal lassen sich die Anforderungen nicht mit Standard-APEX Tags umsetzen. Die HTML Design Elemente kommen dann zum Einsatz. So eine einfache Darstellung von Hilfetexten wird dann zu einem (lösbaren) Problem. Auf der Seite http://blog.internetcreations.com/2012/05/using-hover-help-text-in-visualforce/ ist eine Lösung ausführlich beschrieben. Bezogen auf mein Beispiel sieht der Code wie folgt aus:

<style>

 .vfHelpText a {position:relative;}

 .vfHelpText a span {display: none;}

 .vfHelpText a:hover span {display: block; position:absolute; top:1.25em; padding:2px 5px; left:-15em; width:15em; z-index:100; border:1px solid orange; background-color:#FEFDB9; color:black;}

</style>

<tr>

  <td>

    <apex:outputLabel value="Phone" for="contactTel" />

    <span class="vfHelpText">

      <apex:outputLink value="javascript:return false;">

       <img src="/s.gif" alt="" class="helpOrb" style="border:0;"/> 

       <span>{!$ObjectType.Contact.fields.Phone.inlineHelpText}</span>

      </apex:outputLink>

    </span>

  </td>

  <td>

    <apex:inputText id="contactTel" value="{!contactTel}" styleClass="requiredInput"/>

  </td>

</tr>

Die Klasse "helpOrb"wird allerdings von Salesforce nicht supported. Jede Änderung dieser Klasse könnte Auswirkungen auf die Darstellung des Fragezeichen-Icons auf der VisualForce Page haben.
Statt
<img src="/s.gif" alt="" class="helpOrb" style="border:0;"/> 
könnte

<img src="/img/alohaSkin/help_orange.png" alt="" class="helpIcon" style="border:0;"/>

benutzt werden, was etwas mehr Update-Sicherheit mitbringt.