如何为Autodesk Forge Sprite Viewable添加提示框（Tooltip）

我正尝试使用Data Visualization API，在Sprite悬停时添加提示框（Tooltip）及对应数据。目前已成功添加Sprite Viewable，但文档仅提及Viewer对象会触发DATAVIZ_OBJECT_HOVERING事件并可添加回调，未说明提示框的具体实现方式。以下代码仅为Sprite的hover事件添加了回调，未涉及提示框及传递数据的逻辑，但演示站点中能看到带有数据的提示框，想了解对应代码库中哪里实现了该功能。

async function onModelLoaded(viewer) {
    const dataVizExt = viewer.getExtension("Autodesk.DataVisualization");
    const DATAVIZEXTN = Autodesk.DataVisualization.Core;
    var styleMap = {};

    // Create model-to-style map from style definitions.
    Object.entries(SensorStyleDefinitions).forEach(([type, styleDef]) => {
        styleMap[type] = new DATAVIZEXTN.ViewableStyle(
            DATAVIZEXTN.ViewableType.SPRITE,
            new THREE.Color(styleDef.color),
            styleDef.url
        );
    });

    const viewableData = new DATAVIZEXTN.ViewableData();
    viewableData.spriteSize = 16;
    let startId = 1;

    devices.forEach((device) => {
        let style = styleMap[device.type] || styleMap["default"];
        const viewable = new DATAVIZEXTN.SpriteViewable(device.position, style, startId);
        viewableData.addViewable(viewable);
        startId++;
    });
    await viewableData.finish();
    dataVizExt.addViewables(viewableData);

    /**
     * Called when a user clicks on a Sprite Viewable
     * @param {Event} event
     */
    function onItemClick(/* event */) {}

    /**
     *  Called when a user hovers over a Sprite Viewable
     * @param {Event} event
     */
    function onItemHovering(event) {
        console.log("Show tooltip here", event.dbId);
    }

    const DataVizCore = Autodesk.DataVisualization.Core;
    viewer.addEventListener(DataVizCore.MOUSE_CLICK, onItemClick);
    viewer.addEventListener(DataVizCore.MOUSE_HOVERING, onItemHovering);
}

在Hyperion参考应用的代码库中，提示框功能的实现分散在以下核心文件：

• src/components/Viewer/Viewer.js：这里监听DATAVIZ_OBJECT_HOVERING事件，通过事件中的dbId匹配对应设备数据，并调用提示框组件的显示逻辑。
• src/components/Tooltip/Tooltip.js：提示框的UI组件实现，负责渲染设备数据、控制提示框的显示/隐藏，以及根据鼠标或Sprite的屏幕坐标调整位置。
• src/services/DeviceService.js：提供根据dbId获取设备详细数据的方法，作为提示框的内容来源。

核心逻辑流程：

1. 触发DATAVIZ_OBJECT_HOVERING事件时，通过event.dbId关联到对应的设备数据
2. 调用Tooltip组件的显示方法，传入设备数据和计算后的屏幕位置
3. Tooltip组件渲染HTML内容并通过CSS控制样式与位置；鼠标移出时隐藏提示框

你也可以参考这个思路自行实现：

• 创建隐藏的HTML元素作为提示框容器
• 在onItemHovering回调中，用event.dbId匹配设备数据，填充到提示框
• 通过viewer.clientToScreen将Sprite的3D位置转换为屏幕坐标，设置提示框的位置
• 鼠标移出Sprite时（可监听MOUSE_LEAVE事件）隐藏提示框

内容的提问来源于stack exchange，提问作者Adarsh Raj