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

Question

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

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

我的问题是，当用户将鼠标悬停在问号图标上时，如何向 HelpAwareContentPanel class（如 Html 标签）和 show/hide 添加另一个元素。

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

感谢@AlexanderLeshkin 的评论。最后我让它工作了。我会 post 我的解决方案，以防其他人需要它：

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

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

How to create a hover tooltip using GWT and GXT 3

java

gwt

frontend

tooltip

gxt