Tippy.js custom theme not being applied

Question

I want to change the style of a tooltip (from tippy.js) and am doing exactly as being told in the docs here:

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',
});

But for some reason my tooltip stays the default color, why?

I added this style:

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

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

My html

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

My 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');
      }
    });
});

What is going wrong? I've tried different colors in hex or in text like above but it stays the default tooltip.

Answer 1

According to the documentation you need to change this line:

.tippy-tooltip.tomato-theme {

to:

.tippy-box[data-theme~='tomato'] {

And, in order to add the style to the arrow you need also:

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

The snippet:

 $( ".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'); } }); });

 .tippy-box[data-theme~='tomato'] { background-color: tomato; color: yellow; }.tippy-box[data-theme~='tomato'][data-placement^='right'] >.tippy-arrow::before { border-right-color: tomato; }.infosvg { width: 20px; }.tooltippy { position: relative; top: 150px; left: 300px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script> <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script> <div> <span class="tooltippy"> <img class="infosvg" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Infobox_info_icon.svg"> <div class="tooltipcontent darktext">Test</div> </span> </div>