如何为Tippy.js工具提示按容器类设不同颜色并解决appendTo错误？

嘿，我能帮你搞定这个Tippy.js的报错问题！咱们先拆解一下错误原因：

你用document.getElementsByClassName('lr-tgi-optional')返回的是一个HTMLCollection（类数组对象），而Tippy.js的appendTo选项要求返回的是单个DOM元素——这个类数组对象并没有contains方法，所以才会抛出TypeError: this.options.appendTo.contains is not a function的错误。

正确的appendTo写法 #

你需要确保appendTo的函数返回单个DOM元素，这里分两种场景给你解决方案：

场景1：每个图标对应自己的父容器（最常用）

如果每个触发工具提示的图标，它的父容器就是你要挂载的.lr-tgi-optional，可以用Tippy提供的this.reference（指向当前触发图标）来定位父容器：

appendTo: function() {
  // 找到当前图标最近的.lr-tgi-optional父容器
  return this.reference.closest('.lr-tgi-optional');
}

场景2：指定单个全局容器

如果你确实要挂载到某个特定的单个容器上，把getElementsByClassName换成querySelector（它返回匹配到的第一个元素）：

appendTo: function() {
  return document.querySelector('.lr-tgi-optional');
}

顺便实现「不同图标组对应不同颜色工具提示」 #

既然已经把工具提示挂载到对应图标组容器里了，咱们可以结合Tippy的theme选项来设置不同颜色：

1. 先给不同图标组容器加差异化的类名，比如.lr-tgi-optional和.lr-tgi-required
2. 编写对应的CSS主题样式：

/* 可选组的工具提示颜色 */
.tippy-box[data-theme='optional-tooltip'] {
  background-color: #4CAF50;
  color: #fff;
}
/* 必填组的工具提示颜色 */
.tippy-box[data-theme='required-tooltip'] {
  background-color: #F44336;
  color: #fff;
}

3. 初始化Tippy时，根据图标所在容器动态设置主题和挂载目标：

// 遍历所有需要加工具提示的图标
document.querySelectorAll('.your-icon-class').forEach(icon => {
  // 找到图标所属的容器
  const container = icon.closest('.lr-tgi-optional, .lr-tgi-required');
  // 根据容器类名匹配对应主题
  const tooltipTheme = container.classList.contains('lr-tgi-optional') 
    ? 'optional-tooltip' 
    : 'required-tooltip';

  tippy(icon, {
    content: '你的工具提示内容',
    appendTo: () => container,
    theme: tooltipTheme,
    // 其他配置选项...
  });
});

这样就能完美实现「不同图标组的工具提示挂载到对应容器，且拥有不同颜色」的需求啦！

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