如何在按下Escape键时关闭React Tooltip？

你写的代码存在两个核心问题，导致Escape键关闭Tooltip的逻辑失效：

1. eventOff 属性不支持escape事件 #

在@react-tooltip 4.2版本中，eventOff仅支持鼠标相关事件（比如click、mouseleave等），不支持键盘事件。你设置eventOff="escape"是无效的，因为组件本身没有把键盘事件纳入eventOff的处理逻辑中。

2. globalEventOff 配置错误 #

globalEventOff的作用是指定全局范围内触发关闭Tooltip的事件，但4.2版本的该属性同样不支持escape作为有效值，可选值和eventOff一致，都是鼠标类事件。因此将escape加入globalEventOff数组也不会产生预期效果。

正确实现方式 #

要实现Escape键关闭Tooltip，需要手动监听键盘事件，结合组件API控制显示状态：

方式一：手动维护显示状态 #

import React, { useState, useEffect } from 'react';
import ReactTooltip from '@react-tooltip';

const YourComponent = () => {
  const [tooltipOpen, setTooltipOpen] = useState(false);

  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === 'Escape') {
        setTooltipOpen(false);
      }
    };

    window.addEventListener('keydown', handleEscape);
    return () => window.removeEventListener('keydown', handleEscape);
  }, []);

  return (
    <>
      {/* 触发Tooltip的元素，绑定事件控制显示 */}
      <div 
        data-tip="tooltip" 
        onMouseEnter={() => setTooltipOpen(true)}
        onMouseLeave={() => setTooltipOpen(false)}
      >
        鼠标悬停查看提示
      </div>
      <ReactTooltip 
        id="tooltip" 
        effect="solid" 
        role="status"
        isOpen={tooltipOpen}
      >
        Some Content
      </ReactTooltip>
    </>
  );
};

export default YourComponent;

如果是点击触发Tooltip，只需把触发元素的事件换成onClick={() => setTooltipOpen(!tooltipOpen)}即可。

方式二：直接调用组件隐藏方法 #

无需维护状态，直接使用ReactTooltip.hide()关闭：

import React, { useEffect } from 'react';
import ReactTooltip from '@react-tooltip';

const YourComponent = () => {
  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === 'Escape') {
        // 关闭指定id的Tooltip，不传id则关闭所有
        ReactTooltip.hide('tooltip');
      }
    };

    window.addEventListener('keydown', handleEscape);
    return () => window.removeEventListener('keydown', handleEscape);
  }, []);

  return (
    <>
      <div data-tip="tooltip">鼠标悬停查看提示</div>
      <ReactTooltip 
        id="tooltip" 
        effect="solid" 
        role="status"
      >
        Some Content
      </ReactTooltip>
    </>
  );
};

export default YourComponent;

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