Question

当我将鼠标移到图像上时，我试图显示一个弹出框。你能帮忙吗？

public shopWidget extends Composite implements ClickListener {
   Image phoneImage = new Image();
   Image serviceImage = new Image();
   FlexTable flTable = new FlexTable();
   flTable.setWidget(0, 0, this.rewardsLabel);
   flTable.setWidget(1, 0, this.serviceImage);
   this.initWidget(flTable);
}

Answer 1

setTitle(String)会在任何UIObject上显示弹出文字，包括Image。这是浏览器的原生，只允许文本。

Answer 2

    Image phoneImage = new Image();
    phoneImage.addMouseOverHandler(new MouseOverHandler() {

        @Override
        public void onMouseOver(MouseOverEvent event) {
            PopupPanel p = new PopupPanel(true);
            Widget source = (Widget) event.getSource();
            int x = source.getAbsoluteLeft() + 10;
            int y = source.getAbsoluteTop() + 10;

            p.add(new Label("hi from tooltip")); // you can add any widget here
            p.setPopupPosition(x, y);
            p.show();

        }
    });

这是gwt

中的简单popup

Answer 3

如果你正在使用swing，它看起来不像你，（那我为什么要回答？）那么所有JComponents都隐含地支持使用方法的工具提示;

setToolTipText(String text)

Answer 4

final PopupPanel pop = new PopupPanel(false, false);
pop.setWidget(new Label("popup"));
Image image = new CustomTooltipImage(pop);
image.setUrl("http://sstatic.net/stackoverflow/img/venn-diagram.png");

以下是自定义工具提示图像类：

public class CustomTooltipImage extends Image implements MouseOverHandler, MouseMoveHandler, MouseOutHandler
{
    private final PopupPanel tooltip;

    public CustomTooltipImage(PopupPanel tooltip)
    {
        super();
        this.tooltip = tooltip;
        addMouseOverHandler(this);
        addMouseOutHandler(this);
        addMouseMoveHandler(this);
    }

    @Override
    public void onMouseOut(MouseOutEvent event)
    {
        tooltip.hide();
    }

    @Override
    public void onMouseMove(MouseMoveEvent event)
    {
        tooltip.setPopupPosition(event.getClientX(), event.getClientY());
    }

    @Override
    public void onMouseOver(MouseOverEvent event)
    {
        tooltip.setPopupPosition(event.getClientX(), event.getClientY());
        tooltip.show();
    }
}

移动鼠标时，工具提示消息

4 个答案: