如何在GWT（JAVA）中获知鼠标悬停的组件？

我明白你的需求——想让页面上所有元素在鼠标悬停时，自动在Tooltip里显示它的类名（不管是GWT Widget的Java类名还是元素的CSS类名，我会都覆盖到）。核心思路就是全局监听鼠标悬停事件，获取当前元素并提取类名，再用Tooltip展示出来。下面是具体的实现方案：

1. 全局监听鼠标事件 #

GWT提供了NativePreviewHandler来监听全局的浏览器事件，这样不用给每个元素单独绑定事件，完美实现自动化需求。我们需要监听mouseover（鼠标进入）和mouseout（鼠标离开）事件，分别处理Tooltip的显示和隐藏。

2. 获取元素对应的类名 #

这里分两种场景处理：

• 如果你要的是GWT Widget的Java类名（比如com.google.gwt.user.client.ui.Button）：通过Widget.getWidgetForElement()把DOM元素映射回对应的GWT Widget，再调用getClass().getName()获取完整类名；如果只需要简单类名，用getClass().getSimpleName()即可。
• 如果你要的是元素的CSS类名：直接调用DOM元素的getClassName()方法即可。

3. 实现Tooltip组件 #

用GWT的PopupPanel来做Tooltip是最方便的，它自带弹出/隐藏、自动定位的能力，还可以自定义样式。

完整代码示例 #

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Element;
import com.google.gwt.event.logical.shared.CloseEvent;
import com.google.gwt.event.logical.shared.CloseHandler;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Event.NativePreviewEvent;
import com.google.gwt.user.client.Event.NativePreviewHandler;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.Widget;

public class HoverTooltipDemo implements EntryPoint {

    private PopupPanel tooltip;

    @Override
    public void onModuleLoad() {
        // 注册全局事件预览监听器
        Event.addNativePreviewHandler(new NativePreviewHandler() {
            @Override
            public void onPreviewNativeEvent(NativePreviewEvent event) {
                Event.NativeEvent nativeEvent = event.getNativeEvent();
                String eventType = nativeEvent.getType();

                // 处理鼠标进入事件
                if ("mouseover".equals(eventType)) {
                    Element targetElement = Element.as(nativeEvent.getEventTarget());
                    // 尝试获取对应的GWT Widget
                    Widget targetWidget = Widget.getWidgetForElement(targetElement);
                    
                    String displayText;
                    if (targetWidget != null) {
                        // 获取带包路径的Java类名
                        displayText = "Widget类名: " + targetWidget.getClass().getName();
                        // 若只需简单类名，替换为：targetWidget.getClass().getSimpleName()
                    } else {
                        // 非GWT Widget时，显示CSS类名
                        displayText = "CSS类名: " + targetElement.getClassName();
                    }

                    // 显示Tooltip，偏移鼠标位置避免遮挡
                    showTooltip(displayText, nativeEvent.getClientX(), nativeEvent.getClientY());
                } 
                // 处理鼠标离开事件
                else if ("mouseout".equals(eventType)) {
                    hideTooltip();
                }
            }
        });
    }

    private void showTooltip(String text, int mouseX, int mouseY) {
        if (tooltip == null) {
            tooltip = new PopupPanel(true); // true表示点击外部自动隐藏
            tooltip.setStyleName("custom-tooltip");
            // 添加关闭监听，避免内存泄漏
            tooltip.addCloseHandler(new CloseHandler<PopupPanel>() {
                @Override
                public void onClose(CloseEvent<PopupPanel> event) {
                    tooltip = null;
                }
            });
        }

        tooltip.clear();
        tooltip.add(new Label(text));
        // 设置Tooltip位置，在鼠标右下角10px处
        tooltip.setPopupPosition(mouseX + 10, mouseY + 10);
        tooltip.show();
    }

    private void hideTooltip() {
        if (tooltip != null && tooltip.isShowing()) {
            tooltip.hide();
        }
    }
}

自定义Tooltip样式（CSS） #

在你的GWT样式文件里添加以下样式，让Tooltip更美观：

.custom-tooltip {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border: 1px solid #34495e;
}

注意事项 #

• 事件冒泡处理：mouseover事件会冒泡，当鼠标从子元素移到父元素时会再次触发，代码里会自动更新Tooltip内容，这是正常的行为。如果想避免，可以改用mouseenter事件（它不会冒泡），但需要注意GWT对mouseenter的支持，或者在事件处理里判断event.getRelatedTarget()是否是当前元素的子元素。
• 非Widget元素：页面上可能存在一些原生DOM元素（比如纯HTML标签），这时候Widget.getWidgetForElement()会返回null，代码里会自动显示它的CSS类名，你可以根据需求调整这部分逻辑。
• 性能优化：如果页面元素非常多，全局监听可能会有轻微性能影响，但GWT的事件处理已经做了优化，一般场景下完全没问题。

内容的提问来源于stack exchange，提问作者Amey Parundekar