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

感谢您的评论@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; }

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

1 个答案: