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


    
    Test

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.

user_3880585 · Answer

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;
}







  
      
      Test

Tippy.js custom theme not being applied

1 Answers