Javascript 如何使用不同颜色的tippy工具提示？

我正在使用Tippy.js作为工具提示。 我有几组带有工具提示的图标。好的问题：每个组都应该根据图标组的容器类以不同的颜色显示工具提示。 但是默认情况下，工具提示在document.body中实例化，如果我使用appendTo选项更改父项，例如

appendTo: function(){
   // so tootips should be instantiated inside each icons group's container
   return document.getElementsByClassName('lr-tgi-optional')
}

---

我收到一个错误（TypeError:this.options.appendTo.contains不是函数）。

我无法重新创建您的错误（但如果您可以共享更多代码，我将更新我的答案）

更改不同工具提示颜色的最简单方法是为每个工具提示创建一个CSS类。根据，然后可以使用

data tippy theme

属性指定主题

例如，要更改不同工具提示的背景色，可以执行以下操作（请原谅我的CSS）：

tippy（“.tip blue”）
蒂皮（“.tip red”）

div.tip{
宽度：10em；
高度：4em；
边框：1px纯紫色；
填充：1em；
边缘：1米；
}
.tippy-tooltip.blue-theme.tippy-background{
背景颜色：蓝色；
}
.tippy-tooltip.red-theme.tippy-background{
背景色：红色；
}

在我的上空盘旋。。。
我有一个不同颜色的工具提示
我和第一个托尔蒂普有相同的课程和主题

我无法重新创建您的错误（但如果您可以共享更多代码，我将更新我的答案）

更改不同工具提示颜色的最简单方法是为每个工具提示创建一个CSS类。根据，然后可以使用

data tippy theme

属性指定主题

例如，要更改不同工具提示的背景色，可以执行以下操作（请原谅我的CSS）：

tippy（“.tip blue”）
蒂皮（“.tip red”）

div.tip{
宽度：10em；
高度：4em；
边框：1px纯紫色；
填充：1em；
边缘：1米；
}
.tippy-tooltip.blue-theme.tippy-background{
背景颜色：蓝色；
}
.tippy-tooltip.red-theme.tippy-background{
背景色：红色；
}

在我的上空盘旋。。。
我有一个不同颜色的工具提示
我和第一个托尔蒂普有相同的课程和主题

您可以在JS中对tippy进行多个不同的调用，然后在代码中识别每个调用。我曾经为不同的组件显示过不同大小的工具提示。这有帮助吗：？你可以发布更多的代码，以帮助我获得你想要的格式的解决方案吗？你可以在JS中对tippy进行多个不同的调用，然后在代码中识别每个调用。我过去曾经为不同的组件显示过不同大小的工具提示。这是否有帮助：？您可以发布更多的代码，以帮助我获得您想要的格式的解决方案吗？是的，这是我最后已经做到的。事实上，我的解决方案不起作用的原因是appendTo只需要一个元素，而不是一个集合。Tippy在1个元素中实例化1次，然后四处移动：它不会为每个tooltipped对象创建1个工具提示。所以事实上你不能声明一类容器。是的，这就是我最后所做的。事实上，我的解决方案不起作用的原因是appendTo只需要一个元素，而不是一个集合。Tippy在1个元素中实例化1次，然后四处移动：它不会为每个tooltipped对象创建1个工具提示。所以实际上你不能声明一类容器。