How to have tippy tooltips with different several colors?

Question

I'm using Tippy.js for tooltips. I have several groups of icons with their tooltips. Fine. Problem: each group should show tooltips in different colors, based on the icons group's container class. But tooltips are by default instantiated in document.body, and if I change the parent with the appendTo option, such as

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

I get an error (TypeError: this.options.appendTo.contains is not a function).

Answer 1

I wasn't able to recreate your error, (but I'll update my answer if you can share some more code).

The easiest way to change colors of different tool tips, would be to create a CSS class for each. According to the Tippy Documentation, you can then specify a theme using the data-tippy-theme attribute.

For example, to just change the background colors for different tooltips, you could do something like this (excuse my 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>

There is many more theming features, such as combining classes, which is all outlined in the Tippy.js documentation.

It's also worth noting, that since Tippy is just using Popper.js, you can also reference the Popper documentation for additional features.