Как получить всплывающие подсказки с разными цветами?

Question

Я использую Tippy.js для всплывающих подсказок. У меня есть несколько групп иконок с их подсказками. Хорошо. Проблема: каждая группа должна отображать всплывающие подсказки разных цветов в зависимости от класса контейнера группы значков. Но всплывающие подсказки по умолчанию создаются в document.body, и если я меняю родителя с опцией appendTo, такой как

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

Я получаю сообщение об ошибке (TypeError: this.options.appendTo.contains не является функцией).

Answer 1

Я не смог воссоздать вашу ошибку (но я обновлю свой ответ, если вы сможете поделиться еще кодом).

Самый простой способ изменить цвета разных всплывающих подсказок - создать класс CSS для каждого из них. Согласно документации Tippy, вы можете указать тему, используя 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>

Существует много других тем, таких как объединение классов, которые описаны в документации Tippy.js.

Также стоит отметить, что, поскольку Tippy просто использует Popper.js, вы также можете обратиться к документации Popper для получения дополнительных функций.