1

Is there a standard mechanism for specifying a tooltip for an <apex:column> header?

I know that <apex:column> has a title attribute but that defines tooltip content for the table data cells in the column, not the header cells.

Obviously there'd be ways to do this with Javascript, but I'm wondering if there's a standard way of doing it that I've not discovered. "No" is a perfectly acceptable answer.

4
  • Are you trying to find something like: <apex:image value="/s.gif" styleClass="helpIcon" title="{!$ObjectType.Order__c.Fields.Division__c.inlineHelpText}" rendered="{!$ObjectType.Order__c.Fields.Division__c.inlineHelpText != null}" /> ?
    – Lance Shi
    Commented Mar 23, 2015 at 5:28
  • Just some help text that'll pop-up when the user hovers over the table header.
    – Matt Lacey
    Commented Mar 23, 2015 at 5:30
  • @LanceShi Does that perfectly replicate the standard UI? I thought we had to wire some mouse events. I ended up rolling my own (only like 20 lines of trivial JS, but doesn't look like the standard UI).
    – sfdcfox
    Commented Mar 23, 2015 at 5:31
  • @sfdcfox yes, it does. We used this quite a lot in our project and it looks perfect.
    – Lance Shi
    Commented Mar 23, 2015 at 5:34

3 Answers 3

9

If you are trying to find something like the standard UI tooltip - the question mark with a round, yellow background. You can simply use something like this:

<apex:image value="/s.gif" styleClass="helpIcon" title="{!$ObjectType.Order__c.Fields.Division__c.inlineHelpText}" 
                                    rendered="{!$ObjectType.Order__c.Fields.Division__c.inlineHelpText != null}" />

You can reference it anywhere in your page. To format a column header so that it looks like this:

Preview of table header with tooltip

You need the following hierarchy of elements:

<apex:facet name="header">
    <apex:outputPanel>
        <apex:outputText value="Assigned To "/>
        <apex:image value="/s.gif" styleClass="helpIcon" title="Drag a trainer here to assign them to all events. To assign a trainer to an individual event, drag their name to that event."/>
    </apex:outputPanel>
</apex:facet>
1
  • I was actually aiming just for text, which my solution achieves, but I think this is the better way to go in terms of usability as it draws attention to the fact that there's extra information available.
    – Matt Lacey
    Commented Mar 23, 2015 at 5:38
1

The closest I've come to covering the whole header cell with this functionality, without resorting to CSS/Javascript is this:

<apex:column width="30%" title="Drag a trainer here to assign an event">
  <apex:facet name="header">
    <apex:outputPanel layout="block" title="Drag a trainer here to assign them to all events">
      Assigned To
    </apex:outputPanel>
  </apex:facet>
  <!-- etc -->

The title attribute in the <apex:column> tag takes care of the regular cells, and the facet is used to sort the header.

I could use a system-defined label for the header but I was using custom text anyway. The use of a <apex:outputPanel> with layout="block" means that the majority of the header cell is covered by the pop-up functionality, not just the text within it.

0

How I addressed this using the various suggestions/answers here so far:

<apex:column>
     <apex:facet name="header">
          <apex:outputPanel layout="block" title="{!$ObjectType.OrderItem.Fields.CustomField__c.inlineHelpText}">
               <apex:outputText value="Custom OrderItem Field"/>                                        
          </apex:outputPanel>
     </apex:facet>                                
     <apex:inputField value="{!orderItem.CustomField__c}" />
</apex:column>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .