Change Tippy JS tooltip theme using javascript

Question

My page has a dark and light theme.

I want to switch between tooltip themes when I switch color themes.

I create 2 tippy themes, one called dark and the other light.

I tried changing the HTML attribute and the tooltip class hoping to force the change in themes but it's not working.

That is my 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");
      }
    });

Any idea why its not working and how I can fix it?

Answer 1

You need to use the setProps() method on a Tippy instance, updating data-tippy-* attributes won't work. You can access the instance on any element from its _tippy property:

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

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