How to put a Tooltip on a Grid Cell in GXT on mouse over?

Question

How can I put a tooltip on a specific grid cell in GXT on mouse over?

I can put a tooltip for the whole grid, but did not find a way to put for a specific grid cell.

More specific, how can I retrieve the informations from the grid cell and when the cursor is over the cell, to display some informations from the cell in a tooltip.

Answer 1

I think the simplest way is to use QuickTip class. This one listens mouseover on some container and shows tip for each children DOM element with qtip attribute presence. Example:

public class GxtToolTipInGxtGrid implements EntryPoint {

    public static class Model {
        private final String name;

        public Model(String name) {
            this.name = name;
        }

        public String getName() {
            return name;
        }
    }

    interface ModelProperties extends PropertyAccess<Model> {
        ValueProvider<Model, String> name();
    }

    private static List<Model> MODELS = Arrays.asList(new Model("John"), new Model("Mary"));
    private static ModelProperties PROPERTIES = GWT.create(ModelProperties.class);

    public void onModuleLoad() {
        ListStore<Model> store = new ListStore<>(Model::getName);
        store.addAll(MODELS);

        List<ColumnConfig<Model, ?>> columns = new ArrayList<>();
        ColumnConfig<Model, Model> column = new ColumnConfig<>(new IdentityValueProvider<>(), 200, "Name with tooltip");
        column.setCell(new SimpleSafeHtmlCell<>(new AbstractSafeHtmlRenderer<Model>() {
            @Override
            public SafeHtml render(Model object) {
                SafeHtmlBuilder sb = new SafeHtmlBuilder();
                //QuickTip will use this attribute (qtip) for showing the tip.
                sb.appendHtmlConstant("<div qtip='" + object.getName() + "'>");
                sb.appendEscaped(object.getName());
                sb.appendHtmlConstant("</div>");
                return sb.toSafeHtml();
            }
        }));
        columns.add(column);
        columns.add(new ColumnConfig<>(PROPERTIES.name(), 100, "Name w/o tooltip"));

        Grid<Model> grid = new Grid<>(store, new ColumnModel<>(columns));
        RootPanel.get().add(grid);
        //Attach QuickTip to grid
        Scheduler.get().scheduleDeferred(() -> new QuickTip(grid));
    }
}

But this is a static approach. I mean, decision to show tooltip and what to show in tooltip has made on rendering phase. However, if you need a dynamic approach, then custom implemenation of the QuickTip analogue might be done.

Also, look at Ext GWT (GXT) tooltip over a grid row . It may contains another solutions.

Answer 2

1. Register Quicktip on the grid.

new QuickTip(myGrid)

2. Override the render function of that cell to have a tooltip.

     public void render(Context context, ImageResource value, SafeHtmlBuilder sb){ sb.appendHtmlConstant("<div qtip='TOOLTIPVALUE'>"); super.render(context, value, sb); sb.appendHtmlConstant("</div>"); }