如何拥有不同颜色的尖尖工具提示？

Question

我正在使用 Tippy.js 作为工具提示。我有几组带有工具提示的图标。美好的。问题：每个组应该根据图标组的容器 class 以不同颜色显示工具提示。但工具提示默认在 document.body 中实例化，如果我使用 appendTo 选项更改父级，例如

appendTo: function(){
   // so tootips should be instantiated inside each icons group's container
   return document.getElementsByClassName('lr-tgi-optional')
}

我得到一个错误（类型错误：this.options.appendTo.contains 不是一个函数）。

Answer 1

我无法重现您的错误，（但如果您可以分享更多代码，我会更新我的答案）。

更改不同工具提示颜色的最简单方法是为每个工具创建一个 CSS class。根据 Tippy Documentation，您可以使用 data-tippy-theme 属性指定主题。

例如，要更改不同工具提示的背景颜色，您可以这样做（对不起我的 CSS）：

tippy('.tip-blue')

tippy('.tip-red')

div.tip{
  width: 10em;
  height: 4em;
  border: 1px solid purple;
  padding: 1em;
  margin: 1em;
}

.tippy-tooltip.blue-theme .tippy-backdrop {
  background-color: blue;
}

.tippy-tooltip.red-theme .tippy-backdrop {
  background-color: red;
}

<script src="https://unpkg.com/tippy.js@2.0.9/dist/tippy.all.min.js"></script>

<div class="tip tip-red" data-tippy-theme="red" title="I'm a red tooltip!">
  Hover over me...
</div>

<div class="tip tip-blue"  data-tippy-theme="blue" title="And I'm a blue tooltip!">
 I have a different colored tooltip
</div>

<div class="tip tip-red" data-tippy-theme="red" title="Hello again" >
  I share the same class and theme as the first tolltip
</div>

还有更多主题功能，例如组合 classes，这些都在 Tippy.js documentation.

中进行了概述

还值得注意的是，由于 Tippy 仅使用 Popper.js，您还可以参考 Popper 文档了解其他功能。

如何拥有不同颜色的尖尖工具提示？

How to have tippy tooltips with different several colors?

javascript

tippyjs