Dynamically changing text to null/undefined does not remove/disable tooltip display

[jadrake75]

So I have buttons/controls that for example should only show a tooltip if enabled (not disabled). To do this I am setting the tooltip based on a state variable. Here is an example from my paging component

<button
      @click="$emit('last')"
      :disabled="lastPage"
      ref="last"
      v-tooltip:top="lastPage ? undefined : t('paging.last')"
    >
      <span class="sw-icon-to-end disabled:opacity-50"></span>
    </button>

so if the state of the component is the lastPage it sets the tooltip to undefined. What is interesting is in this case for the first/last actions these are undefined initially and sure enough the early return on the

if (binding.value === null || binding.value === undefined)
    return;

Seems to skip building it, and then once they are enabled and I set tooltip text they will display text. I also verified that if I change the text this works fine.

So I think the issue is if the binding.value changes to be undefined you need to remove the class for 'vue-tooltip' and only add it if it gets by this point in the processing.... ie something like

const updateTooltip = (el: HTMLElement, binding: { value: string; modifiers: { [x: string]: boolean; }; arg?: string; }) => {
  const className = 'vue-tooltip';
  if (binding.value === null || binding.value === undefined) {
    el.classList.remove(className)
    return;
  }
  el.classList.add(className);
  el.dataset.tooltip = binding.value;
  el.classList.toggle(`${className}__${getStyleClass(binding.modifiers)}`, true);
  el.classList.toggle(`${className}__${binding.arg || 'bottom'}`, true);
};