隐藏提示工具提示答案

【问题标题】：Hide Tippy Tooltip隐藏提示工具提示
【发布时间】：2021-01-13 22:09:48
【问题描述】：

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

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

【问题讨论】：

你试过disable的方法吗？

标签： javascript tippyjs

【解决方案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>

【讨论】：