Javascript 未应用Tippy.js自定义主题

我想更改工具提示（来自tippy.js）的样式，并且完全按照文档中的说明进行操作：

Themes are created by including a class on the tippy-tooltip element as part of a selector in the form .tippy-tooltip.x-theme. Let's demonstrate this by creating our own theme called tomato:

.tippy-tooltip.tomato-theme {
  background-color: tomato;
  color: yellow;
}
To apply the theme, specify a theme prop without the -theme suffix:

tippy('button', {
  theme: 'tomato',
});

但出于某种原因，我的工具提示保持默认颜色，为什么

我添加了这种风格：

.tippy-tooltip.tomato-theme {
  background-color: tomato;
  color: yellow;
}
.infosvg {
  width: 20px;
}

tooltippy {
  position: absolute;
  top: 150px;
  left: 300px;
}
 

我的html

<span class="tooltippy">
    <img class="infosvg" src="assets/images/custom/icon_info.svg">
    <div class="tooltipcontent darktext">Test</div>
</span>

出什么事了？我尝试了不同颜色的十六进制或上面的文本，但它保留默认的工具提示。

根据需要更改此行：

.tippy-tooltip.tomato-theme {

致：

此外，为了向箭头添加样式，还需要：

.tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before {

片段：

$（“.tooltippy”）。每个（函数（i）{
蒂皮（这个{
触发器：“单击”，
allowHTML:是的，
位置：'对'，
动画：“缩放精细”，
互动：没错，
主题:"番茄",，
内容：功能（参考）{
返回reference.querySelector（'.tooltipcontent'）；
}
});
});
.tippy box[数据主题~='tomato']{
背景色：番茄；
颜色：黄色；
}
.tippy box[数据主题~='tomato'][数据放置^='right']>。tippy箭头：：之前{
右边框颜色：番茄；
}
.infosvg{
宽度：20px；
}
.工具提示{
位置：相对位置；
顶部：150px；
左：300px；
}

试验
谢谢！我看的是错误的版本，哈哈。
.tippy-box[data-theme~='tomato'] {

.tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before {