0

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

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

1 回答 1

1

问题是toggleErrorMessage()创建一个新实例，不同于initialTippy。您可以使用disable()andenable()方法并使用相同的功能来完成这两者。这是一个简单的例子：

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>

于 2021-01-14T02:27:32.920 回答