Изменить тему всплывающей подсказки Tippy JS, используя JavaScript

Question

У моей страницы темная и светлая тема.

Я хочу переключаться между темами всплывающих подсказок при переключении цветовых тем.

Я создаю 2 быстрые темы, одна называется темная, а другая светлая.

Я попытался изменить атрибут HTML и класс всплывающей подсказки, надеясь вызвать изменение в темах, но это не работает.

Это мой JS:

      if ($('#dn').is(":checked")) {
        $('.color-mode').addClass("light-mode");
        $('.color-mode').removeClass("dark-mode");
        $('.tiptool').attr('data-tippy-theme','light');
        $('.tippy-tooltip').addClass("light-theme");
        $('.tippy-tooltip').removeClass("dark-theme");
      } else {
        $('.color-mode').removeClass("light-mode");
        $('.color-mode').addClass("dark-mode");
        $('.tiptool').attr('data-tippy-theme','dark');
        $('.tippy-tooltip').addClass("dark-theme");
        $('.tippy-tooltip').removeClass("light-theme");
      }
    });

Любая идея, почему это не работает и как я могу это исправить?

Answer 1

Вам нужно использовать set() метод на экземпляре Tippy, обновление атрибутов data-tippy-* не будет работать. Вы можете получить доступ к экземпляру любого элемента из его _tippy имущество:

var theme = $('#dn').is(":checked") ? "light" : "dark";

$('.tiptool').each(function (index, el) {
  if (el._tippy) {
    el._tippy.set({ theme: theme });
  }
})