如何在HTML中为SVG圆形元素添加悬停显示的tooltip？

你可以根据自己的需求选择方案，新手优先推荐前两种，无需编写JavaScript即可实现。

方案1：原生SVG <title> 标签（零额外代码） #

SVG内置的<title>标签本身就支持悬浮显示提示效果，不需要引入任何额外样式或脚本，是最简单的实现方式。

示例代码： #

<td>
  <svg width='50' height='50'>
    <!-- 这里顺便调整了圆形的位置，原cx、cy为2会导致圆形在左上角几乎不可见，调整到25可让圆形在svg画布中居中 -->
    <circle cx='25' cy='25' r='20' fill='#ff8B45'>
      <!-- title标签内的内容就是悬浮要显示的日期 -->
      <title>2024年6月1日</title>
    </circle>
  </svg>
</td>

• 优点：实现成本为零，兼容性极好
• 缺点：tooltip样式是浏览器原生样式，无法自定义修改，显示延迟固定

方案2：CSS自定义tooltip（可改样式，无需JS） #

如果需要自定义tooltip的颜色、大小、位置，甚至加箭头效果，可以用CSS伪元素实现，不需要写JS逻辑。

步骤1：修改HTML结构，给单元格加自定义属性存日期 #

<!-- 给td加统一class和data-tooltip属性存日期 -->
<td class="event-cell" data-tooltip="2024年6月1日">
  <svg width='50' height='50'>
    <circle cx='25' cy='25' r='20' fill='#ff8B45' />
  </svg>
</td>

步骤2：添加CSS样式 #

/* 父单元格设为相对定位，作为tooltip的定位基准 */
.event-cell {
  position: relative;
  cursor: pointer;
}

/* 定义tooltip主体样式 */
.event-cell::after {
  content: attr(data-tooltip); /* 读取自定义属性里的日期作为内容 */
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  display: none;
  z-index: 999;
}

/* 可选：加小三角箭头 */
.event-cell::before {
  content: '';
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #333;
  display: none;
  z-index: 999;
}

/* 悬浮时显示tooltip */
.event-cell:hover::after,
.event-cell:hover::before {
  display: block;
}

• 优点：完全自定义样式，不需要写JS，适配所有静态日期场景
• 缺点：仅适合显示纯文本简单内容，复杂交互需要额外处理

方案3：JS控制的灵活tooltip（适合复杂需求） #

如果需要tooltip跟随鼠标移动、显示复杂内容（比如除了日期还有事件说明、图片），可以用JS实现。

步骤1：添加全局tooltip容器 #

<div id="custom-tooltip" style="position: fixed; display: none; background: #333; color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 12px; z-index: 9999; pointer-events: none;"></div>

步骤2：给圆形加自定义属性存日期 #

<circle cx='25' cy='25' r='20' fill='#ff8B45' data-date="2024年6月1日 儿童节活动" />

步骤3：添加JS逻辑 #

const tooltip = document.getElementById('custom-tooltip');
// 绑定所有圆形元素的悬浮事件
document.querySelectorAll('circle').forEach(circle => {
  const dateInfo = circle.getAttribute('data-date');
  // 鼠标移入显示tooltip
  circle.addEventListener('mouseover', e => {
    tooltip.textContent = dateInfo;
    tooltip.style.display = 'block';
    tooltip.style.left = e.clientX + 10 + 'px';
    tooltip.style.top = e.clientY + 10 + 'px';
  });
  // 鼠标移动时更新tooltip位置
  circle.addEventListener('mousemove', e => {
    tooltip.style.left = e.clientX + 10 + 'px';
    tooltip.style.top = e.clientY + 10 + 'px';
  });
  // 鼠标移出隐藏tooltip
  circle.addEventListener('mouseout', () => {
    tooltip.style.display = 'none';
  });
});

• 优点：灵活度最高，支持任意复杂交互和内容
• 缺点：需要编写少量JS代码

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