Node Tooltips on Hover

Functional Overview

This example demonstrates implementing hover tooltips for nodes using mouse event handlers. Tooltips display node information when the mouse enters a node and hide when it leaves.

Implementation of Key Features

Mouse Event Handlers

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

Node Slot with Hover Events

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

Tooltip Rendering

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

Creative Use Cases

Social Networks: Show user profile previews on hover. Display name, bio, and mutual connections without clicking.

Product Catalogs: Display product details on hover. Show price, specifications, and availability as users browse.

Organization Charts: Show employee information on hover. Display role, department, and contact details.

Knowledge Graphs: Preview concept definitions on hover. Show summaries and related topics without navigation.

Network Topology: Display device status and configuration on hover. Quick access to technical details.

Project Management: Show task details on hover. Progress, assignee, and deadlines at a glance.

Skill Trees: Display skill requirements and bonuses on hover. Help players understand skill options.

File Explorers: Show file metadata on hover. Size, type, and modification date without clicking.