如何在APS Viewer中实现鼠标悬停组件时显示组件名称为Tooltip？

实现步骤： #

1. 创建自定义Tooltip DOM元素
   先在页面中添加一个用于显示Tooltip的元素，设置基础样式：

   <div id="component-tooltip" style="position: absolute; display: none; background: #333; color: #fff; padding: 4px 8px; border-radius: 4px; pointer-events: none; z-index: 10000;"></div>
   

2. 通过dbId获取组件名称并控制Tooltip显示
   利用已监听的OBJECT_UNDER_MOUSE_CHANGED事件拿到dbId后，调用Viewer的getBulkProperties方法获取组件的名称属性（不同模型的属性键可能有差异，比如Revit模型常用Name，通用场景可优先用DisplayName）：

   let currentDbId = null;
   const tooltipEl = document.getElementById('component-tooltip');
   
   viewer.addEventListener(Autodesk.Viewing.OBJECT_UNDER_MOUSE_CHANGED, async (event) => {
     if (event.dbId) {
       currentDbId = event.dbId;
       // 获取组件属性
       const props = await viewer.getBulkProperties([currentDbId], ['Name', 'DisplayName']);
       // 优先取匹配的名称属性，无匹配则显示dbId作为兜底
       const componentName = props[0]?.properties?.find(p => p.displayName === 'Name' || p.displayName === 'DisplayName')?.displayValue || `Component ${currentDbId}`;
       tooltipEl.textContent = componentName;
       tooltipEl.style.display = 'block';
     } else {
       // 无组件悬停时隐藏Tooltip
       tooltipEl.style.display = 'none';
       currentDbId = null;
     }
   });
   

3. 让Tooltip跟随鼠标移动
   监听Viewer容器的mousemove事件，实时更新Tooltip的位置，避免遮挡鼠标：

   viewer.container.addEventListener('mousemove', (e) => {
     if (currentDbId) {
       tooltipEl.style.left = `${e.clientX + 10}px`;
       tooltipEl.style.top = `${e.clientY + 10}px`;
     }
   });
   

4. 优化边界适配（可选）
   若Tooltip超出页面可视区域，可添加位置校正逻辑，比如判断右侧和底部边界，调整Tooltip的显示位置：

   viewer.container.addEventListener('mousemove', (e) => {
     if (currentDbId) {
       const viewportWidth = window.innerWidth;
       const viewportHeight = window.innerHeight;
       const tooltipWidth = tooltipEl.offsetWidth;
       const tooltipHeight = tooltipEl.offsetHeight;
   
       let leftPos = e.clientX + 10;
       let topPos = e.clientY + 10;
   
       // 右侧边界校正
       if (leftPos + tooltipWidth > viewportWidth) {
         leftPos = e.clientX - tooltipWidth - 10;
       }
       // 底部边界校正
       if (topPos + tooltipHeight > viewportHeight) {
         topPos = e.clientY - tooltipHeight - 10;
       }
   
       tooltipEl.style.left = `${leftPos}px`;
       tooltipEl.style.top = `${topPos}px`;
     }
   });
   

内容的提问来源于stack exchange，提问作者Praful Bharate