1

我的页面有一个深色和浅色主题。

当我切换颜色主题时，我想在工具提示主题之间切换。

我创建了 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");
      }
    });

知道为什么它不起作用以及如何修复它吗？

4

1 回答 1

1

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

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

$('.tiptool').each(function (index, el) {
  if (el._tippy) {
    el._tippy.setProps({ theme: theme });
  }
})
于 2019-02-25T06:39:07.070 回答