Fix tooltip behaviors on click/focus

src/Tooltip.jsx

@@ -0,0 +1,56 @@
+import React, { forwardRef, useRef } from "react";
+import { useTooltipTriggerState } from "@react-stately/tooltip";
+import { useTooltipTrigger, useTooltip } from "@react-aria/tooltip";
+import { mergeProps } from "@react-aria/utils";
+import styles from "./Tooltip.module.css";
+import classNames from "classnames";
+
+export function Tooltip({ position, state, ...props }) {
+  let { tooltipProps } = useTooltip(props, state);
+
+  return (
+    <div
+      className={classNames(styles.tooltip, styles[position || "bottom"])}
+      {...mergeProps(props, tooltipProps)}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export const TooltipTrigger = forwardRef(({ children, ...rest }, ref) => {
+  const tooltipState = useTooltipTriggerState(rest);
+  const fallbackRef = useRef();
+  const triggerRef = ref || fallbackRef;
+  const { triggerProps, tooltipProps } = useTooltipTrigger(
+    rest,
+    tooltipState,
+    triggerRef
+  );
+
+  if (
+    !Array.isArray(children) ||
+    children.length > 2 ||
+    typeof children[1] !== "function"
+  ) {
+    throw new Error(
+      "TooltipTrigger must have two props. The first being a button and the second being a render prop."
+    );
+  }
+
+  const [tooltipTrigger, tooltip] = children;
+
+  return (
+    <div className={styles.tooltipContainer}>
+      <tooltipTrigger.type
+        {...mergeProps(triggerProps, tooltipTrigger.props, rest)}
+        ref={triggerRef}
+      />
+      {tooltipState.isOpen && tooltip({ state: tooltipState, ...tooltipProps })}
+    </div>
+  );
+});
+
+TooltipTrigger.defaultProps = {
+  delay: 250,
+};