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

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 components. — Alicia Sykes, Jan 22 '18 at 16:07
Could you post a bit more of your code, to help me get a solution in the format you'd like? — Alicia Sykes, Jan 22 '18 at 16:32

Alicia Sykes · Accepted Answer · 2018-01-22T16:41:15.470

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.

Yes that's what I already managed to do in the end. In fact, the reason why my solution didn't work is that appendTo expects a single element, not a collection. Tippy is instantiated 1 time in 1 element and then moved around: it does not create 1 tooltip for every tooltipped object. So in fact you cannot declare a class of containers. — Luca Reghellin, Jan 24 '18 at 07:10

How to have tippy tooltips with different several colors?

1 Answers1