Visual clue to indicate table header might be truncated

Question

In our application, we have a table view which shows the values of some hierarchical model.

For example, the hierarchical model could be

Root
|_ Property 1
|_ A parent
   |_ Property 2

In this case, the table would have 2 columns

Property 1 | Property 2

In the table header, we only show the actual property, but not the parent(s) as there is simply not enough room to display the whole path including all parents (the number of parents can become rather large, and so does the number of columns).

The whole path (which is relevant!) is displayed in the tool tip of the table header. This is of course very hard/near impossible to discover for the users of our application. Does anybody knows a good visual clue to hint towards our users that the tool tip contains relevant information. Or another mechanism to display this information ?

Note that it is possible to sort the data in the table by clicking on the header, in which case there appears an arrow in the column header (right side), indicated it is sorted. This might limit our options to add a visual clue in the header.

In case it is relevant, the table appears in a Java application with a Swing-based front-end.

Answer 1

A small coloured triangle hint in the very top right/left corner of the cell.

Examples:

Oracle ADF Desktop Integration (very similar to your exact scenario)

Source: http://docs.oracle.com/middleware/1213/adf/develop-desktop-integration/adf-desktop-table-comps.htm

Microsoft Excel (related but not the same scenario)

In Microsoft Excel when there is more information to display on a cell (error info options) then a small coloured triangle icon is applied to the very top left corner. The user clicks in the cell which reveals an error button. This is then clicked to reveal a list of options to fix the error.

Answer 2

Similarly to the way an abbr and an acronym tag is styled to indicate there is more to read if you hover, you could add a dashed/dotted line below the headers that have a tooltip.

Example

N.b.

I'm not 100% sure on the 'rules' on this, i.e. can you use a dashed underline to indicate any type of tooltip or can they only be used for actual abbreviations or acronyms..?

Answer 3

You can use an icon to indicate that the box has a hover state. The actual icon you'd use would depend on the look and feel of your UI, but icons I've seen used for this purpose include:

• Magnifying glass icons
• square frame (stylised window) icons
• Mouse cursor icons
• speech bubble icons

The important thing is to signal to your users that some of the headers are hoverable, and some are not. The best way to do this is to use your design to make the correct headers afford hovering.

Answer 4

It is very common to use an ellipsis (...) to indicate truncation. Many UIs use this to indicate that the full text is not seen in a text field, grid cell, or other control, but will be available on hover.

In a grid cell it would work like the below screenshot:

What you could do with your header is prefix the property name with ellipsis like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}