Prevent multiple tooltips, add escape to close

src/components/ClickableTooltip.tsx

@@ -1,5 +1,5 @@
 import { Flex, Tooltip, TooltipProps, useDisclosure } from "@chakra-ui/react";
-import { ReactNode } from "react";
+import { ReactNode, useCallback, useRef } from "react";
 
 interface ClickableTooltipProps extends TooltipProps {
   children: ReactNode;
@@ -15,11 +15,38 @@ const ClickableTooltip = ({
   ...rest
 }: ClickableTooltipProps) => {
   const label = useDisclosure();
+  const ref = useRef<HTMLDivElement>(null);
+  const handleMouseEnter = useCallback(() => {
+    const openTooltips = document.querySelectorAll(
+      '[role="tooltip"]:not([hidden])'
+    );
+    if (!openTooltips.length) {
+      label.onOpen();
+    }
+  }, [label]);
+  const handleMouseLeave = useCallback(() => {
+    if (
+      !isFocusable ||
+      (ref.current !== document.activeElement && isFocusable)
+    ) {
+      label.onClose();
+    }
+  }, [isFocusable, label]);
+  const handleKeydown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === "Escape") {
+        label.onClose();
+      }
+    },
+    [label]
+  );
   return (
-    <Tooltip isOpen={label.isOpen} {...rest}>
+    <Tooltip isOpen={label.isOpen} {...rest} closeOnEsc={true}>
       <Flex
-        onMouseEnter={label.onOpen}
-        onMouseLeave={label.onClose}
+        onKeyDown={handleKeydown}
+        ref={ref}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
         onClick={label.onOpen}
         tabIndex={0}
         onFocus={isFocusable ? label.onOpen : undefined}