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.
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.
if (cellElement.getParentElement()
.getFirstChildElement().isOrHasChild(Element.as(event.getNativeEvent().getEventTarget()))
&& cellElement.getTagName().equalsIgnoreCase("span"))
This resolves the issue.
Thanks Andrei & Alex for replies.
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";
}
};
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.');
}
}
}
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.');
来源:https://stackoverflow.com/questions/12833308/gwt-celltable-tooltip-not-working-properly