如何使用 GWT 和 GXT 3 创建悬停工具提示

Question

我正在尝试创建一个悬停工具提示（使用 GWT 和 GXT 3），其中包含一个问号图标和另一个 html 元素（隐藏），当用户悬停问号图标时将显示该元素。我一直在谷歌上搜索，但周围没有太多关于 GXT 的信息。

这是我的代码，据我所知，用户悬停图标并触发了 onMouseOver 操作。

我的问题是，如何在 HelpAwareContentPanel 类中添加另一个元素（如 Html 标签）并在用户悬停问号图标时显示/隐藏。

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);
      }
   }
}

提前非常感谢您。

Answer 1

感谢您的 cmets @AlexanderLeshkin。最后我让它工作了。我会发布我的解决方案以防其他人需要它：

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; }