节点悬停提示

演示使用鼠标事件处理器的节点悬停提示，显示定位的信息面板。

节点悬停提示

功能概述

本示例演示如何使用鼠标事件处理器为节点实现悬停提示。当鼠标进入节点时，提示显示节点信息，当鼠标离开时隐藏。

核心特性实现

鼠标事件处理器

const showNodeTips = (nodeObject: RGNode, $event: React.MouseEvent) => {
    setCurrentNode(nodeObject);
    if (myPage.current) {
        const _base_position = myPage.current.getBoundingClientRect();
        setIsShowNodeTipsPanel(true);
        setNodeMenuPanelPosition({
            x: $event.clientX - _base_position.x + 10,
            y: $event.clientY - _base_position.y + 10
        });
    }
};

const hideNodeTips = () => {
    setIsShowNodeTipsPanel(false);
};

带悬停事件的节点插槽

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <div
            className="h-full"
            onMouseEnter={(e) => showNodeTips(node, e)}
            onMouseLeave={() => hideNodeTips()}
        >
            <div className="c-my-rg-node" style={{ backgroundColor: node.color }}>
                <GetLucideIcon name={node.data?.myicon} />
            </div>
            <div style={{ /* label styling */ }}>
                {node.text}
            </div>
        </div>
    )}
</RGSlotOnNode>

提示渲染

<RGSlotOnView>
    {isShowNodeTipsPanel && currentNode && (
        <div
            className="p-3 bg-white border border-gray-300 shadow-xl absolute rounded-lg"
            style={{
                left: `${nodeMenuPanelPosition.x}px`,
                top: `${nodeMenuPanelPosition.y}px`,
                zIndex: 1000,
                pointerEvents: 'none'
            }}
        >
            <div>Node Info</div>
            <div>Name: {currentNode.text}</div>
            <div>ID: {currentNode.id}</div>
            <div>Icon: {currentNode.data?.myicon}</div>
        </div>
    )}
</RGSlotOnView>

创意使用场景

社交网络：悬停显示用户个人资料预览。无需单击即可显示姓名、简介和共同联系。

产品目录：悬停显示产品详细信息。浏览时显示价格、规格和可用性。

组织架构图：悬停显示员工信息。显示角色、部门和联系方式。

知识图谱：悬停预览概念定义。显示摘要和相关主题而无需导航。

网络拓扑：悬停显示设备状态和配置。快速访问技术详细信息。

项目管理：悬停显示任务详细信息。一目了然的进度、分配人员和截止日期。

技能树：悬停显示技能要求和加成。帮助玩家了解技能选项。

文件资源管理器：悬停显示文件元数据。大小、类型和修改日期，无需单击。