How to create a hover tooltip using GWT and GXT 3

Question

I am trying to create a hover tooltip (using GWT and GXT 3) which comprises of a question mark icon and another html element (hidden) which will be shown when the user hovers the question mark icon. I've been googling a lot but there is no so much info about GXT around.

This is my code and as far as I got is that the user hover the icon and it's triggered the onMouseOver action.

My question is, how can I add another element to the HelpAwareContentPanel class (like a Html label) and show/hide when the user hovers the question mark icon.

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.MouseOverEvent;
import com.google.gwt.event.dom.client.MouseOverHandler;
import com.google.gwt.user.client.ui.Image;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.box.MessageBox.MessageBoxIcons;


    public class HelpAwareContentPanel extends ContentPanel {


    public HelpAwareContentPanel() {
        super();
    }

  public HelpAwareContentPanel(String tooltip) {
        super();

    if (tooltip != null && tooltip.length() > 0) {
        MessageBoxIcons icons = GWT.create(MessageBoxIcons.class);
        Image img = new Image(icons.info());
        img.addMouseOverHandler(new MouseOverHandler() {
            @Override
            public void onMouseOver(MouseOverEvent event) {
                GWT.log("message: " + tooltip);
            }
        });
        img.setPixelSize(16, 16);
        img.setTitle(tooltip);
        getHeader().addTool(img);
      }
   }
}

Thank you so much in advance.

Example - http://examples.sencha.com/gxt/4.0.3/#ExamplePlace:quicktips. JavaDoc - http://docs.sencha.com/gxt/4.x/javadoc/gxt-4.0.3/com/sencha/gxt/widget/core/client/tips/QuickTip.html — Alexander Leshkin, Apr 11 '18 at 04:45

vhbazan · Accepted Answer · 2018-04-16T15:28:58.430

Thanks for your comments @AlexanderLeshkin. Finally I have it working. I will post my solution in case someone else needs it:

private WidgetComponent createIconWithTooltip(String message){ ImageResource img = helpIcon(); //this is a method that returns an imageResource, built from an URL Image helpIcon = new Image(img); helpIcon.setHeight("20"); helpIcon.setWidth("20"); WidgetComponent imgWidgetComponent = new WidgetComponent(helpIcon); imgWidgetComponent.getElement().getStyle().setCursor(Cursor.POINTER); imgWidgetComponent.setToolTip(message); return imgWidgetComponent; }

How to create a hover tooltip using GWT and GXT 3

1 Answers1