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

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

0 голосов
/ 25 февраля 2019

На моей странице есть темная и светлая тема.

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

Я создаю 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");
      }
    });

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

1 Ответ

0 голосов
/ 25 февраля 2019

Вам нужно использовать метод 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 });
  }
})
...