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 });
}
});
}