Tippy.js 自定义主题未应用

Question

我想更改工具提示的样式（来自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;
}
 

我的网页

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

出了什么问题？我已经尝试了十六进制或上面的文本中的不同颜色，但它仍然是默认的工具提示。

Answer 1

根据文档，您需要更改此行：

.tippy-tooltip.tomato-theme {

到：

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

而且，为了将样式添加到箭头，您还需要：

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

片段：

.tippy-tooltip.tomato-theme {

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

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