隐藏 Tippy 工具提示

Question

我想在用户将鼠标悬停在输入上时显示错误提示。如果用户修复了错误，我不希望在他们悬停时再显示尖尖的工具提示。我在下面显示它，但我不知道如何在用户将鼠标悬停在输入框上时阻止它显示。有人可以帮忙吗？

$().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

问题是 toggleErrorMessage() 正在创建一个新实例，不同于 initialTippy。您可以使用 disable() 和 enable() 方法并使用相同的函数来完成这两项操作。这是一个简单的例子：

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>

隐藏 Tippy 工具提示

Hide Tippy Tooltip

javascript

tippyjs