时间戳

首页 > 解决方案 > Tippy.js 自定义主题未应用

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>

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

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

标签： javascriptjquery

解决方案

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

.tippy-tooltip.tomato-theme {

至：

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

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

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

片段：

$( ".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>

推荐阅读