Altair导出SVG格式文件时是否支持tooltip功能？

tooltip丢失的原因 #

Altair的默认tooltip是基于Vega-Lite的JavaScript交互逻辑实现的，直接导出的静态SVG文件本身不携带可执行的JS代码，因此会丢失交互效果。你可以通过以下几种方式实现SVG场景下的tooltip效果：

• 方法1：嵌入SVG到网页时搭配Vega-Lite运行时
  不直接使用独立的静态SVG文件，而是在部署的页面中同时引入Vega、Vega-Lite、Vega-Embed运行时脚本，调用vegaEmbed方法关联你的Altair图表spec和SVG容器，即可在复用SVG渲染结果的同时激活JS交互逻辑，保留原生可自定义样式的tooltip效果。
• 方法2：导出时直接生成自带原生tooltip的SVG
  你可以在导出前配置图表参数，让Altair自动将tooltip内容写入每个SVG图形元素的<title>标签，浏览器原生支持鼠标悬停时展示该标签的内容。参考实现代码：

  import altair as alt
  from vega_datasets import data
  
  # 加载示例数据集
  source = data.cars()
  
  # 定义带tooltip配置的散点图
  chart = alt.Chart(source).mark_circle(size=60).encode(
      x='Horsepower:Q',
      y='Miles_per_Gallon:Q',
      color='Origin:N',
      tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']
  )
  # 导出SVG时开启tooltip写入配置
  chart.save('scatter_tooltip.svg', embed_options={'renderer': 'svg', 'tooltip': True})
  

  注意：该方案依赖浏览器原生的title展示逻辑，tooltip样式无法自定义，仅支持展示纯文本内容，不支持富文本或复杂交互。
• 方法3：手动给已有静态SVG添加tooltip
  如果你已经导出了不带tooltip的静态SVG，也可以手动或通过批量脚本给每个对应SVG图形元素添加<title>子标签，写入需要展示的提示内容，不需要额外依赖，所有主流浏览器都支持原生展示该类tooltip。

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