Grid: Tooltip for cell

In the new Grid widget, is there a way to set a tooltip (floating little window) for:

  • A cell in a row?
  • A header (column title)?
  • A footer cell?

Hi, at least this should be possible for header and footer cells, since those accept component inside of them, and you can set tooltip for a component by the setDescription() method:
But I think this is not possible for other grid cells. Maybe you could make a new enchancement ticket about this or modify the one above?

Thanks Johannes Tuikkala. I created
Ticket # 17,374
Tooltip for cells in Grid
, as you suggested.

BTW, it’s time to update the name of your employer on
your profile page
. :slight_smile:

I tried to put a Label with description to the default header row in order to emulate the column tooltip and it works but it’s not a good idea because it prevents from sorting when the user clicks the column - the label consumes the clic event and the user have to click directly on the small arrow after the label for sorting. It is very inconvinient and inconsistent with other columns that don’t have a label in their headers.

Much simpler solution is to use ‘title’ HTML attribute by setting the column header text as HTML:

grid.getDefaultHeaderRow().getCell(“columnWithTooltip”).setHtml(“<span title="this is the tooltip">Column With Tooltip”);

The missing cell tool tip is the reason I have not yet replaced my tables with the Grid.
Hope this feature gets implemented!

Hi, depending on your use case tooltips can be done simply using a HtmlRenderer and the title attribute. By writing a custom Renderer a VTooltip could be used to support HTML tooltip content.


Letting a subclass to HtmlRenderer provide the title attribute is a nice approach and works well.
Tooltip should be rendered in a concistent way (White text on black background for the Valo theme).
The concept of custom renderers is documented in the Vaad in book “15.4.1. Renderers”.
However I don’t understand how to bring the VTooltip class into the picture.

Could you provide a short explanation or a reference where this is documented?

Regarding suggestion by Håkan Arvidsson, I filed
Ticket # 18,578
, W
rite example showing how to extend TextRenderer/HtmlRenderer to show a tooltip

Hi all,

I’m sorry that I totally forgot to return to this thread. I also found that it is indeed unfeasible to use VTooltip from an extension; the way the tooltip system is written requires support from the component on the client side. This could be done by a third party by extending GridConnector and overriding the hasTooltip and getTooltipInfo methods, but it gets pretty tricky.

Some good news, though: core support for row/cell descriptions (tooltips) has been implemented and is included in Vaadin 7.6 :slight_smile:

Indeed good news. Looking forward to have another go with the Grid.

Hi Håkan Arvidsson,
Were you able to use tooltip for Grid. If yes can you give me an example how to use ToolTip for grid cells.

Hi Hafiz,

I’m sorry to say, I am still on 7.5.8 and the Table class.
The Grid has not yet found its way into my application;-(

Hi again Hafiz,

Having upgraded to 7.7.7 and after a few Grid usages, I now have implemented a cell tooltip.
It works real fine!

Here my code:

grid.setCellDescriptionGenerator(cell -> getCellDescription(cell));
    private String getCellDescription(CellReference cell) {
        String descriptionText = null;
        Item item = cell.getItem();
        Property prop = cell.getProperty();
        if (item instanceof BeanItem<?>) {
            Object bean = ((BeanItem<?>)item).getBean();
            if (bean instanceof WineRow) {
                WineRow wineRow = (WineRow)bean;
                // The actual description text is depending on the application
                // descriptionText = ...
        return descriptionText;

Hi Håkan,

In case tooltip contains more rows, it always shows up scrollbar, even when i set height to 100%. How can I remove scrollbar. Meaning that height of the tooltip will be enough so descriptionText will fill in.

Hi Juraj,
Displaying the tool tip is a pure html issue.
The tool tip area should adapt its size to the content, e.g. multiple
delimited text lines or a

No scrollbar should appear.

Hi Håkan,

well , than it is strange, i delimeted text by multiple
but outcome can be seen in picture

In this picture i tried to set height to 100% but still it looks quite strange

Scrollbar does apper.

Hi Juraj,

I also get a scrollbar after 7 text lines.
This seems to be a feature of descriptions(tool tips) in general:
However it’s not documented in the javadoc.
The description is not a pure html issue as I assumed;-( Only a limited set of xml tags are considered (see the javadoc).

You might get an answer from a Vaadin expert if you opened up a new specific thread for this issue.