Close React Tooltip at Escape character

Question

Requirement: I am using @react-tooltip 4.2, I need to close it when the user presses escape.

Unsuccessful Attempt:

<ReactTooltip id={ "tooltip" } effect="solid" role="status" globalEventOff={ ['click', 'escape'] } eventOff="escape">
     Some Content
</ReactTooltip>

What am I doing wrong?

Answer 1

One solution is to create a boolean state to hide the tooltip whenever the escape key is pressed and similarly you also need to show it manually. First create a state variable:

const [isOpen, setIsOpen] = useState(false)

then add a global event listener to execute whenever the escape key is pressed inside the useEffect hook:

useEffect(() => {
  const handleKeyPress = (event) => {
    if (event.key === 'Escape') {
      setIsOpen(false);
    }
  };

  document.addEventListener('keydown', handleKeyPress);

  return () => {
    document.removeEventListener('keydown', handleKeyPress); // remove the event listener when this component is no longer used
  };
}, []);

and set isOpen property in your tooltip component:

<ReactTooltip id={ "tooltip" } effect="solid" role="status" isOpen={isOpen}>
     Some Content
</ReactTooltip>

then finally don't forget to show the tooltip by setting onMouseEnter={() => setIsOpen(true)} in your desired component.

You can also use ref property to hide the tooltip, without managing the state manually, see Imperative mode (ref).

You can look into the @react-tooltip docs example. hope it helps.

Answer 2

It's important to note that globalEventOff and eventOff properties might not directly support the behavior you're looking for with key presses. These properties are typically used to define events that cause the tooltip to not show or hide based on mouse actions (like click), not specifically keyboard events.

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

const MyComponent = () => {
  // State to control tooltip visibility
  const [isTooltipVisible, setIsTooltipVisible] = useState(false);

  // Function to show tooltip
  const showTooltip = () => setIsTooltipVisible(true);

  // Function to hide tooltip
  const hideTooltip = () => setIsTooltipVisible(false);

  useEffect(() => {
    // Function to handle key down events
    const handleKeyDown = (event) => {
      if (event.key === 'Escape') {
        hideTooltip(); // Hide tooltip when Escape is pressed
      }
    };

    // Add event listener for keydown
    window.addEventListener('keydown', handleKeyDown);

    // Cleanup by removing the event listener
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  return (
    <div>
      {/* You can conditionally render the tooltip based on state or use it to control its visibility */}
      {isTooltipVisible && (
        <ReactTooltip id="tooltip" effect="solid" role="status">
          Some Content
        </ReactTooltip>
      )}
      {/* Trigger element to show tooltip (example) */}
      <button onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
        Hover or Focus Me
      </button>
    </div>
  );
};