Пользовательская тема 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>

Мои JS:

$( ".tooltippy" ).each(function( i ) {
    tippy(this, {
      trigger: 'click',
      allowHTML: true,
      placement: 'right',
      animation: 'scale-subtle',
      interactive: true,
      theme: 'tomato',
      content: function (reference) {
        return reference.querySelector('.tooltipcontent');
      }
    });
});

Что происходит не так? Я пробовал разные цвета в шестнадцатеричном формате или в тексте, как указано выше, но он остается всплывающей подсказкой по умолчанию.