How can I create a PanelPopup for an ImageResourceCell in a CellTable (GWT 2.4)?

Question

Our application displays a CellTable which has an ImageResourceCell column:

    Column<Alert, ImageResource> noteColumn = new Column<Alert, ImageResource>(new ImageResourceCell()) {
        @Override
        public ImageResource getValue(Alert alert) {
            if (alert.getNote() != null && alert.getNote().length() > 0) {
                return images.note();
            } else {
                return images.emptyNote();
            }
        }
      };
    dataTable.addColumn(noteColumn, "");

We would like to modify this column so that a PopupPanel is displayed when the user moves his mouse over the image. The content of the PopupPanel should be specific for each row in the column. What is the best way to achieve this?

My initial attempt (based on an answer to a somewhat-similar question ) looks like this, however the problem here is that I am not able to get the "note" from each Alert for the PopupPanel:

private class MyImageResourceCell extends ImageResourceCell {
    @Override
    public Set<String> getConsumedEvents() {
        Set<String> consumedEvents = new HashSet<String>();
        consumedEvents.add("mouseover");
        consumedEvents.add("mouseout");
        return consumedEvents;
    }

    @Override
    public void onBrowserEvent(Context context,
                               Element parent,
                               ImageResource value,
                               NativeEvent event,
                               ValueUpdater<ImageResource> imageResourceValueUpdater) {
        switch (DOM.eventGetType((Event) event)) {
            case Event.ONMOUSEOVER:
                // show panel
                break;
            case Event.ONMOUSEOUT:
                // hide panel
                break;
            default:
                break;
        }
    }
}

private void createAndAddNoteColumn() {
    Column<Alert, ImageResource> noteColumn = new Column<Alert, ImageResource>(new MyImageCell()) {
        @Override
        public ImageResource getValue(Alert alert) {
            if (alert.getNote() != null && alert.getNote().length() > 0) {
                return images.note();
            } else {
                return images.emptyNote();
            }
        }
    };
    dataTable.addColumn(noteColumn, "");
}

Answer 1

Instead of creating the PopupPanel as part of the table column, I left the column as a normal ImageResource column, and then added a cellPreviewHandler to capture the mouseover event for the column in question:

    final DecoratedPopupPanel simplePopup = new DecoratedPopupPanel(true);
    dataTable.addCellPreviewHandler(new CellPreviewEvent.Handler<Alert>() {
        @Override
        public void onCellPreview(CellPreviewEvent<Alert> alertCellPreviewEvent) {
            if ("mouseover".equals(alertCellPreviewEvent.getNativeEvent().getType())
                    && alertCellPreviewEvent.getColumn() == 5
                    && alertCellPreviewEvent.getValue().getNote() != null) {
                // using hard-coded column number isn't the most elegant solution, but it's ok for now.
                int left = alertCellPreviewEvent.getNativeEvent().getClientX();
                int top = alertCellPreviewEvent.getNativeEvent().getClientY();
                simplePopup.setWidget(new HTML(alertCellPreviewEvent.getValue().getNote()));
                simplePopup.setPopupPosition(left, top);
                simplePopup.show();
            } else {
                simplePopup.hide();
            }
        }
    });