Enable/disable all instances programmatically to allow user preferences?

[kslstn]

I'd like to create a user-defined preference that defines whether or not tooltips are shown at all.

I'm already using hideAll() to hide all visible tooltips, but that doesn't prevent tooltips from appearing after that.

I thought I should iterate through the instances and enable/disable each when the user changes their preferences like this:

const instances = tippy('[data-tippy-content]');
for (let element of instances) {
  if (showTips) element.enable();
  else element.disable;
}

But that does only cause a second, unstyled tooltip to appear on top of the old instance. So I thought perhaps this is how it's supposed to be done:

const instances = tippy('[data-tippy-content]');
for (let element of instances) {
  if (showTips) element.enable()
  else element.setProps({trigger: 'manual'});
}

But that doesn't seem to have an effect at all.

For completeness, here's how I start Tippy:

tippy.setDefaultProps({
  delay: [1000, 250],
  arrow: true,
  animation: 'shift-away',
  duration: 50,
  plugins: [followCursor],
  maxWidth: 800,
});

delegate('#aftel', {
  target: '[data-tippy-content]',
  theme: 'aftel',
});

How can we disable and enable all instances at once after Tippy has started?

[kslstn]

This seems to work:

tippy.setDefaultProps({
  delay: [1000, 250],
  arrow: true,
  animation: 'shift-away',
  duration: 50,
  plugins: [followCursor],
  maxWidth: 800,
});

const tippyDelegation = delegate('#aftel', {
  target: '[data-tippy-content]',
  theme: 'aftel',
});

const disableAll = function(){
  hideAll()
  for (let instance of tippyDelegation) instance.disable();
}
const enableAll = function(){
  for (let instance of tippyDelegation) instance.enable();
}