svg图表交互提示框的核心是将svg作为可编程dom容器，用data-属性绑定数据，配合绝对定位的html div实现跨设备、可样式化、无障碍的提示效果。
用 HTML + SVG 制作带交互提示框的图表组件，核心是把 SVG 当作可编程的 DOM 容器来用——图形元素（如 <rect></rect>、<circle></circle>）本身支持事件监听和属性操作，再配合一个轻量级的 HTML <div> 作为提示框载体，就能实现跨设备、可样式化、语义清晰的交互效果。<h3>用 SVG 元素承载数据并绑定提示信息</h3>
<p>每个可视化图形（比如柱子或散点）应携带原始数据，推荐用 <code>data- 属性，而不是依赖索引或 title：
<rect x="20" y="100" width="40" height="80" fill="steelblue" data-value="80" data-label="一月销售额"></rect><circle cx="120" cy="65" r="6" fill="#3498db" data-id="Q2-2024" data-amount="124.7"></circle>
这样在事件中能直接读取：event.target.getAttribute('data-label')，避免因排序变动或动态增删导致的数据错位。
用绝对定位 div 实现灵活提示框
SVG 自带的 title 属性不适用于移动端，也不支持富文本或样式控制。真正可靠的方案是创建一个独立的 <div class="tooltip">，通过 JS 动态设置位置和内容：<ul>
<li>在 <code> 底部添加：<div id="chart-tooltip" class="tooltip" style="opacity:0; pointer-events:none;"></div>
position: absolute; z-index: 1000; background: #333; color: white; padding: 6px 12px; border-radius: 4px; font-size: 14px; max-width: 240px; word-break: break-word;
overflow: hidden 截断或受 transform 影响偏移监听事件并动态更新提示框
给 SVG 内部图形统一加事件，避免逐个绑定（尤其数据量大时）：
- 对整个
<svg></svg>添加mouseover和mouseout监听 - 在
mouseover回调中判断event.target是否为带data-value的图形元素 - 读取数据后，用
getBoundingClientRect()获取触发元素屏幕坐标，再设置 tooltip 的left和top - 示例逻辑：
const rect = event.target.getBoundingClientRect(); tooltip.style.left = (rect.right + 8) + 'px'; tooltip.style.top = (rect.top - 20) + 'px'; tooltip.textContent = label + '：' + value;
兼顾响应式与无障碍体验
提示框不只是“鼠标悬停显示”，还需适配真实使用场景：
- 移动端用户靠 touchstart 触发，可在事件监听里同时处理
mouseover和touchstart，并加防抖（如 300ms 内不重复触发） - 键盘用户需支持聚焦（例如给可交互图形加
tabindex="0"），再监听focus和blur模拟 hover 效果 - 为 tooltip 添加
role="tooltip"和aria-hidden="false"，并用aria-labelledby关联触发源，满足 WCAG 基础要求
