1

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?

Robin
  • 65
  • 1
  • 12

1 Answers1

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 });
  }
})
atomiks
  • 684
  • 6
  • 11
  • Im getting the following error: ui-scripts.js?verion=1.9:65 Uncaught TypeError: el._tippy.set is not a function at HTMLSpanElement. (ui-scripts.js?verion=1.9:65) at Function.each (jquery-3.3.1.min.js:2) at w.fn.init.each (jquery-3.3.1.min.js:2) at HTMLInputElement. (ui-scripts.js?verion=1.9:63) at HTMLInputElement.dispatch (jquery-3.3.1.min.js:2) at HTMLInputElement.y.handle (jquery-3.3.1.min.js:2) – Robin Mar 03 '19 at 16:58
  • Are you using the latest Tippy.js? Check the website for the latest versions. v3-v4 have `set()` but not earlier versions – atomiks Mar 04 '19 at 01:50