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.

  • 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 Mar 23 '15 at 5:28
  • Just some help text that'll pop-up when the user hovers over the table header. – Matt Lacey Mar 23 '15 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 Mar 23 '15 at 5:31
  • @sfdcfox yes, it does. We used this quite a lot in our project and it looks perfect. – Lance Shi Mar 23 '15 at 5:34
7

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>
  • 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 Mar 23 '15 at 5:38
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.