GWT CellTable tooltip not working properly - gwt

Question

I am using a CellTable and I want to show a tooltip whenever I hover over any of the cell.
My code is working fine but the tooltip is not changing its position.
What I mean to say is, if I hover over cell 1 tooltip shows and then if I hover over cell 100, the tooltip data changes but the tooltip still shows at cell 1.
I am using following code:
cellTable.addCellPreviewHandler(new Handler<List<String>>() {
#Override
public void onCellPreview(CellPreviewEvent<List<String>> event) {
if ("mouseover".equals(event.getNativeEvent().getType())) {
Element cellElement = event.getNativeEvent().getEventTarget().cast();
cellElement.setTitle('cell contents go here.');
}
}
}
Any help is much appreciated.
Thanks.

Answer 1

You can extend Column class and override method render. In render method you can use property "title", which is used to set the tool tip text. Simple example:
SampleColumn<T> extends TextColumn<T> {
#Override
public void render(Context context, T object, SafeHtmlBuilder sb) {
sb.appendHtmlConstant("<div title=\"" + getTitle(object) + "\">");
sb.appendEscaped(getValue(object));
sb.appendHtmlConstant("</div>");
}
#Override
public String getValue(T object) {
return displayedValue;
}
public String getTitle(T object) {
return yourTooltipText;
}
}
When using this code, the tooltip will be exacly near the target cell.

Answer 2

if (cellElement.getParentElement()
.getFirstChildElement().isOrHasChild(Element.as(event.getNativeEvent().getEventTarget()))
&& cellElement.getTagName().equalsIgnoreCase("span"))
This resolves the issue.
Thanks Andrei & Alex for replies.

Answer 3

Thank you all, I was looking for a solution to that as well.
Using A cup of tea's answer, I made a generic class that can be reused to add tooltips to any cell. It's based on a decorator pattern. Here it is if it may help someone:
public class TooltipCell extends AbstractSafeHtmlCell<String>
{
AbstractCell<String> cell;
private String tooltip;
public TooltipCell(AbstractCell<String> cell, String tooltip)
{
super(SimpleSafeHtmlRenderer.getInstance(), BrowserEvents.CLICK, BrowserEvents.KEYDOWN);
this.cell = cell;
this.tooltip = tooltip;
}
#Override
protected void render(com.google.gwt.cell.client.Cell.Context context, SafeHtml data, SafeHtmlBuilder sb)
{
sb.appendHtmlConstant("<div title=\"" + tooltip + "\">");
cell.render(context, data.asString(), sb);
sb.appendHtmlConstant("</div>");
}
#Override
public void onBrowserEvent(com.google.gwt.cell.client.Cell.Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater)
{
cell.onBrowserEvent(context, parent, value, event, valueUpdater);
}
}
Then it can be used as follows:
myColumn = new Column<MyObject, String>(new TooltipCell(new ButtonCell(), "tooltip text"))
{
#Override
public String getValue(CurrencyDTO object)
{
return "button text";
}
};

Answer 4

This solution works:
cellTable.addCellPreviewHandler(new Handler<List<String>>() {
#Override
public void onCellPreview(CellPreviewEvent<List<String>> event) {
if ("mouseover".equals(event.getNativeEvent().getType())) {
cellTable.getRowElement(event.getIndex()).getCells().getItem(event.getColumn()).setTitle('cell contents go here.');
}
}
}

Answer 5

cellTable.addCellPreviewHandler(new Handler<List<String>>() {
#Override
public void onCellPreview(CellPreviewEvent<List<String>> event) {
if ("mouseover".equals(event.getNativeEvent().getType())) {
cellTable.getRowElement(event.getIndex()).getCells().getItem(event.getColumn()).setTitle('cell contents go here.');
}
}
}
Andrei's solution works good but there is a bug should be fixed:
cellTable.getRowElement(event.getIndex() - cellTable.getPageStart()).getCells().getItem(event.getColumn()).setTitle('cell contents go here.');