如何强制Tippy提示框始终保持显示状态？

要让提示框始终保持可见，核心是禁用Tippy的默认鼠标触发行为，改为完全手动控制显示状态。

问题原因 #

你的代码中，Tippy默认会监听mouseenter和mouseleave事件来自动显示/隐藏提示框，所以鼠标移出输入框时，提示框会被默认逻辑触发隐藏。

修改方案 #

调整Tippy的配置，关闭自动触发逻辑，改为手动控制：

1. 添加trigger: 'manual'，禁用所有自动触发的事件（鼠标、焦点等）
2. 可选配置showOnCreate: true，让实例创建后直接显示提示框，省去手动调用show()的步骤
3. 移除不必要的sticky选项（该选项针对自动触发场景的粘性定位，手动模式下无效）

修改后的完整代码 #

function trimWhitespaceUserName() {
  var usernameInput = document.getElementById('username');
  var originalValue = usernameInput.value;
  var trimmedValue = originalValue.replace(/\s/g, '');
  usernameInput.value = trimmedValue;

  var usernameInputColor = document.getElementById("username");

  if (usernameInput.tippyInstance) {
    usernameInput.tippyInstance.destroy();
  }

  if (originalValue !== trimmedValue) {
    if (!usernameInput.tippyInstance) {
      usernameInput.tippyInstance = tippy(usernameInput, {
        content: 'spaces removed',
        placement: 'left',
        arrow: true,
        hideOnClick: false,
        interactive: true,
        trigger: 'manual', // 关键：禁用自动触发行为
        showOnCreate: true // 创建实例时自动显示提示框
      });

      usernameInputColor.addEventListener("mouseenter", () => {
        usernameInputColor.style.backgroundColor = "red";
      });

      usernameInputColor.addEventListener("mouseleave", () => {
        usernameInputColor.style.backgroundColor = "yellow";
      });
    }
  }
}

document.addEventListener("DOMContentLoaded", function() {
  trimWhitespaceUserName();
});

<div>
  <input type="text" id="username" value="first last">
</div>

<!-- Popper + Tippy -->
<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>

修改后，提示框会一直保持可见状态，只有当你手动调用usernameInput.tippyInstance.hide()或销毁实例时才会隐藏。

内容的提问来源于stack exchange，提问作者Astro Muzzy