Web Components 实现 Tooltip 的核心是封装可复用、样式隔离、行为可控的自定义元素，关键在于结构设计（shadow DOM 隔离）、触发逻辑（mouseenter/focus 监听）、动态定位（getBoundingClientRect 计算）、属性响应（observedAttributes）及细节优化（可访问性、边界处理）。

Web Components 实现气泡提示框（Tooltip）浮层组件，核心在于封装可复用、样式隔离、行为可控的自定义元素。关键不是堆砌功能，而是理清结构、触发逻辑、定位策略和生命周期管理。

结构设计：用 shadow DOM 隔离样式与结构

气泡提示框需要独立样式、不污染全局，且内容需动态插入。用 attachShadow({mode: 'open'}) 创建影子根，内部包含触发元素占位符（如 slot）和浮层模板：

• 主容器用 接收任意触发元素（按钮、图标等）
• 浮层部分（tooltip panel）默认 hidden，通过 class 控制显隐
• 避免在 shadow DOM 外写样式——所有 CSS 写在 shadow 内或通过 :host 和 ::slotted 精准控制

触发与显示逻辑：监听 + 动态定位

浮层不能靠 CSS 伪元素实现（无法动态定位），必须 JS 计算位置。常见做法是监听 mouseenter/focus 显示，mouseleave/blur 延迟隐藏（防误触）：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 用 getBoundingClientRect() 获取触发元素位置
• 根据 position 属性（如 top / bottom / left / right）计算浮层偏移量
• 用 transform: translate() 或 top/left 定位，配合 position: fixed 避免被父级 overflow 裁剪
• 添加 pointer-events: none 到浮层容器，防止遮挡下层交互（除非需要 hover 保持显示）

属性与 API：暴露可控接口

通过 static get observedAttributes() 响应式监听属性变化，让使用者能灵活配置：

• content：设置提示文字（支持纯文本或传入 HTML 字符串，注意 XSS 过滤）
• placement：指定方向（top/bottom/left/right），影响定位计算
• delay：毫秒级延迟显示/隐藏，提升体验
• disabled：布尔属性，禁用提示（适合条件性关闭）
• 提供 show() / hide() 方法供 JS 主动调用

细节优化：可访问性与边界处理

一个健壮的 tooltip 不只是“弹出来”，还要兼顾真实场景：

• 为浮层添加 role="tooltip" 和 aria-hidden / aria-labelledby 关联触发元素
• 窗口 resize 或滚动时重新计算位置（监听 scroll 和 resize，用 requestAnimationFrame 节流）
• 检测浮层是否超出视口，自动调整方向（如 bottom 放不下就切到 top）
• 避免重复绑定事件——在 connectedCallback 中绑定，disconnectedCallback 中清理