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).

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).

• javascript
• tippyjs

• 1 You can have multiple different calls to tippy within your JS, you'd then identify each one within your code. I've done it in the past to display different sized tooltips for different ponents. – Alicia Sykes Commented Jan 22, 2018 at 16:07
• Does this help: jsfiddle/lissy93/tahptho0 ? – Alicia Sykes Commented Jan 22, 2018 at 16:30
• Could you post a bit more of your code, to help me get a solution in the format you'd like? – Alicia Sykes Commented Jan 22, 2018 at 16:32

1 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./[email protected]/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 bining 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.