Table column header tooltip

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

I have a couple of table column headers represented as icons. I would have liked to set a description on them, triggering a tooltip. But I can’t find how. Is it possible?

Thanks for your help,

JS.

2

I don’t think this is currently possible :confused:

Extending the Table could be an option, or a simple feature request.

3

It is trivial to extend com.vaadin.ui.table.Table to put arbitrary HTML in the headers. The class below is shows how.

[font=Courier New]

public class TooltipHeaderTable

[indent]
extends com.vaadin.ui.table.Table {

@Override
public String getColumnHeader(Object property) {

   return "<a title='Tooltip text'" + propertyId + "</a>".replace("'","\"");

}

[/indent]}

[/font]

Unfortunately, the title tooltip implemented above is browser dependent. Namely:
IE 8.0 – Works
Firefox 3.6.24 – Works when Javascript is disabled.

Does anyone have any ideas why this might be, or how to make it work with Javascript enabled in Firefox?

Thanks,
Curt

4

I tried the following test page in both firefox and IE :

<html>
    <body>
        <a title="title only - title only">title only</a><br/>
        <a alt="alt only - alt only">alt only</a><br/>
        <a alt="alt and title (alt) - alt and title (alt)" title="alt and title (title) - alt and title (title)">alt and title</a>
    </body>
</html>

Firefox shows the tooltip correctly when “title” is set. Old IE versions need “alt”, newer IE seems to read both (and prefer title).

But your code is surprising :

return "<a title='Tooltip text'" + propertyId + "</a>".replace("'","\"");

If we consider propertyId to be “property ID” then the code would be :

return "<a title='Tooltip text'" + "property ID" + "</a>".replace("'","\"");

The replace would run on “” and would do nothing, so you should get in the end :

return "<a title='Tooltip text'property ID</a>";

Which does not seems correct html.

Maybe you meant it to be :

return ("<a title='Tooltip text" + propertyId + "'</a>").replace("'","\"");

Or :

return "<a title=\"Tooltip text" + propertyId + "\"</a>";
5

I got it working for me even with a column icon. Try playing around around with a negative css-margin value – luck thomas

6

I got it working, not by extending the table but by means of the .properties-file, because I needed it to work in a multiple-language application.
In my propertiesfiles (1 per language) I wrote:
‘tableName’.column.‘columnName’.header=ColumnName.

It may not be the right way to do it, but at least it works.