求支持SVG元素的Tooltip库：可添加动态文本与自定义样式

嘿，我太懂这种纠结了——自己手写Tooltip虽然能实现功能，但后续维护和优化起来挺麻烦，想找第三方库又卡在SVG的兼容性上。刚好我之前做类似需求时踩过坑，给你推荐几个亲测好用、对SVG友好的Tooltip库，完美适配你的需求：

• Tippy.js
  这是我最常用的一款，基于Popper.js开发，轻量且功能齐全，对SVG元素的支持堪称完美，完全不依赖HTML的title属性。你可以轻松实现动态文本、自定义样式，还能灵活控制Tooltip的触发方式、位置甚至动画效果。
  举个快速上手的示例：

  // 先引入Tippy.js的JS和CSS文件
  tippy('rect#2', {
    content: () => "'jQuery' tooltip.", // 支持动态生成文本
    allowHTML: true, // 允许插入HTML内容
    theme: 'custom-tooltip', // 自定义主题类名，方便写样式
    placement: 'top' // 控制Tooltip显示位置
  });
  

  它的样式可以通过CSS直接定制，自带的定位逻辑还能自动避免Tooltip出界，比手写div省心太多。

• Floating UI
  这是Popper.js的继任者，更轻量化，专注于处理浮动元素（Tooltip、下拉框这类）。它的核心模块只负责计算位置，剩下的交互和样式完全由你掌控，灵活性拉满，对SVG元素的定位精度极高。
  简单的实现示例：

  import {computePosition, flip, shift} from '@floating-ui/dom';
  
  const targetRect = document.querySelector('rect#2');
  // 创建Tooltip元素
  const tooltip = document.createElement('div');
  tooltip.className = 'tooltip';
  tooltip.textContent = "'jQuery' tooltip.";
  document.body.appendChild(tooltip);
  
  // 绑定鼠标事件
  targetRect.addEventListener('mouseover', async () => {
    tooltip.style.display = 'block';
    // 计算并设置Tooltip位置
    const {x, y} = await computePosition(targetRect, tooltip, {
      middleware: [flip(), shift()] // 自动调整位置避免出界
    });
    Object.assign(tooltip.style, {
      left: `${x}px`,
      top: `${y}px`
    });
  });
  
  targetRect.addEventListener('mouseout', () => {
    tooltip.style.display = 'none';
  });
  

  虽然需要自己写一点触发逻辑，但完全可控，适合需要高度自定义的场景。

• qTip2
  如果你项目里已经在用jQuery，那qTip2绝对是上手最快的选择。这个老牌jQuery插件对SVG的支持也很到位，不强制依赖title属性，你可以通过配置项直接指定Tooltip内容，自定义样式也很方便。
  示例代码：

  $(document).ready(function() {
    $("rect#2").qtip({
      content: {
        text: "'jQuery' tooltip." // 也可以用函数返回动态内容
      },
      style: {
        classes: 'my-custom-tooltip' // 绑定自定义样式类
      },
      position: {
        my: 'top center',
        at: 'bottom center'
      }
    });
  });
  

  语法都是熟悉的jQuery风格，几乎不需要额外学习成本。

其实SVG本身是支持<title>子元素的（比如<rect id="2"><title>默认提示</title></rect>），但很多老Tooltip库只识别HTML元素的title属性，所以选对支持SVG的库才是关键。上面推荐的这几个都能精准识别SVG元素的位置，不会出现定位偏移的问题。

内容的提问来源于stack exchange，提问作者P.Ellis