Hide Tippy Tooltip

Question

I want to show a tippy tooltip on an error when the user hovers over a input. If the user fixes the error, I do not want the tippy tooltip to show anymore when they hover. I have the below to show it but I cannot figure out how to stop it from showing when the user hovers over the input box. Can someone help?

$().ready(function () {
    const initialTippy = tippy(document.querySelector('.tippy'));
}

// Simplified validation for this question.
function validate() {
    if (isValid) {
        // Kill the tippy message...which I need help with. 
        // initialTippy.destroy() does not work and I do not get an error.
    }
    else {
        toggleErrorMessage('You have an error');    // Works when I hover over highlighted input box.
    }
}

// If my input does not validate, this is called. 
function toggleErrorMessage(message) {
    tippy('.tippy', {
        trigger: 'mouseenter',
        onShow(instance) {
            instance.setProps({ content: message });
        }
    });
}

Answer 1

The problem is that toggleErrorMessage() is creating a new instance, different from initialTippy. You can use disable() and enable() methods and use the same function to do both. Here's a quick example:

const initialTippy = tippy(document.querySelector('.tippy'));
// For example purposes
let isValid = false;

$(function () {
  // Disable on document ready
  initialTippy.disable();
    
  // For example purposes
  $('.tippy').on('click', function(){
    validate();
  });
});


function validate() {
  let message = !isValid ? 'You have an error' : null;
  toggleErrorMessage(!isValid, message);
  
  // For example purposes
  isValid = !isValid;
}


function toggleErrorMessage(show, message = null) {
  initialTippy.setProps({ content: message });
  if (show) {
    initialTippy.enable();
    initialTippy.show();
  }
  else {
    initialTippy.disable();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

<button type="button" class="tippy">Toggle tooltip</button>