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

您需要在Tippy实例上使用set()方法，无法更新data-tippy- *属性。您可以从其元素的_tippy属性访问该实例：

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

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

使用javascript更改Tippy JS工具提示主题

1 个答案: