Search code examples
gwtextjstooltipgxt

How to use QuickTip on Grid cell Sencha GXT 3.1.1?


I need add a tooltip on grid cell, but this tooltip must allow the user select text inside the tooltip. I'm using the QuickTip like this.

ColumnConfig<ClientModel, String> clmName = new ColumnConfig<ClientModel, String>
(dpGridModel.name(), 150, "Name");
clmName.setCell(new TextCell() {
        @Override
        public void render(Context context, String value, SafeHtmlBuilder sb) {
            if (value != null) {
                StringBuilder bAux  = new StringBuilder();
                ClientModel c = lstModel.get(context.getIndex());
                bAux.append("<div style='width:100%;height:21px;' qtip='<table>");
                bAux.append("<tr><td><b>ID:</b></td><td>" + c.getId() + "</td></tr>");
                bAux.append("<tr><td><b>Name:</b></td><td>" + c.getName() + "</td></tr>");
                bAux.append("<tr><td><b>Adress:</b></td><td>" + c.getAddress()+ "</td></tr>");
                bAux.append("<tr><td><b>City:</b></td><td>" + c.getCity()+ "</td></tr>");
                bAux.append("<tr><td><b>Email:</b></td><td>" + c.getEmail() + "</td></tr>");
                bAux.append("<tr><td><b>Phone:</b></td><td>" + c.getPhone() + "</td></tr>");
                bAux.append("<tr><td><b>Zip Code:</b></td><td>" + c.getZipcode() + "</td></tr>");
                bAux.append("</table>'>" + value + "</div>");
                sb.appendHtmlConstant(bAux.toString());
            }
        }

    });

QuickTip t = new QuickTip(gridClient);
t.setAllowTextSelection(true);
t.setClosable(true);

The Tooltip ever hides when mouse move. I need what the Tooltip wait by close click to hide, like ToolTip with ToolTipConfig.

I tryed using QuickTip with ToolTipConfig like this.

QuickTip cqt = new QuickTip(gridClient);
cqt.setMaxWidth(650);
cqt.setClosable(true);
cqt.setQuickShowInterval(500);
cqt.setAllowTextSelection(true);
ToolTipConfig config = new ToolTipConfig();
config.setAutoHide(false);
cqt.setToolTipConfig(config);

It's works QuickTip doesn't hide, but appears a blank tooltip above the QuickTip

thanks for help :D


Solution

  • The second try does not work because when you call setToolTipConfig in the QuickTip object it is going to create a new ToolTip for the QuickTip and this is not what we want.

    In the first case we just need to set autoHide to false, but there is no method to do this in the QuickTip class, so the option is to use the update method like this:

    QuickTip t = new QuickTip(gridClient);
    t.setAllowTextSelection(true);
    ToolTipConfig config = new ToolTipConfig();
    config.setAutoHide(false);
    config.setCloseable(true);  // need to set it here otherwise it will be overwritten
    t.update(config);