问题描述
我的页面有一个黑暗和光明的主题。
当我切换颜色主题时，我想在工具提示主题之间切换。
我创建了 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楼
atomiks
1
2019-02-25 06:39:07
您需要在 Tippy 实例上使用setProps()方法，更新 data-tippy-* 属性将不起作用。
您可以从其_tippy属性访问任何元素上的实例：
var theme = $('#dn').is(":checked") ? "light" : "dark";
$('.tiptool').each(function (index, el) {
if (el._tippy) {
el._tippy.setProps({ theme: theme });
}
})