DataGridColumn header tooltips

I really thought that something as simple as putting a tooltip on a DataGridColumn header would be easy to do in Flex.

If you want to make your own headerRenderer, then it is obviously very simple to just set the toolTip property in your renderer. But I was curious if it could easily be done with out a custom header renderer. My solution was to create a new class which extended DataGridColumn and adds three new properties: headerToolTip, headerToolTipPosition, and headerTextTruncate (which adds the "..." if the headerText is too long to fit).

Here is the simplified version of the MXML code:

<mx:DataGrid x="10" y="10" width="500" height="130" dataProvider="{employees}">
  <mx:columns>
    <ui:DataGridToolTipColumn headerText="Phone" dataField="phone" width="90"
      headerToolTip="Phone Number (tooltip above)" headerToolTipPosition="above"/>
  </mx:columns>
</mx:DataGrid>

The headerToolTipPosition property can have the following values:

above - positions the tooltip above the header

below - positions the tooltip below the header

left - positions the tooltip to the left of the header

right - positions the tooltip to the right of the header

inline - positions the tooltip on top of the header

default - positions the tooltip slightly below and to the right of the header (this is the default value if headerToolTipPosition isn't specified.

And here is the example (right-click View Source for the full source code):

Feel free to use this code or modify it to your own needs.

** Updated on September 16^th 2009

Fixed it so that setting headerWordWrap="true" now works as expected.

When the headerToolTip isn't defined then no tooltip is shown.

Added a new property: headerTextTruncate which will truncate the headerText and add the ellipsis ("...") if the headerText doesn't fit inside the renderer. Note that this property doesn't work if the headerWordWrap property is set to true.