@codecademy/gamut

Index: package/dist/Tip/shared/InlineTip.js
===================================================================
--- package/dist/Tip/shared/InlineTip.js
+++ package/dist/Tip/shared/InlineTip.js
@@ -1,4 +1,5 @@
+import { useCallback, useState } from 'react';
 import { InfoTipContainer } from '../InfoTip/styles';
 import { PreviewTipContents, PreviewTipShadow } from '../PreviewTip/elements';
 import { ToolTipContainer } from '../ToolTip/elements';
 import { InfoTipWrapper, TargetContainer, TipBody, ToolTipWrapper } from './elements';
@@ -8,8 +9,9 @@
 export const InlineTip = ({
   alignment,
   avatar,
   children,
+  closeOnClick,
   escapeKeyPressHandler,
   id,
   inheritDims,
   info,
@@ -24,15 +26,30 @@
   wrapperRef,
   zIndex
 }) => {
   const isHoverType = type === 'tool' || type === 'preview';
+  const [isDismissed, setIsDismissed] = useState(false);
+  const handleClick = useCallback(() => {
+    if (closeOnClick) setIsDismissed(true);
+  }, [closeOnClick]);
+  const handleUndismissed = useCallback(() => setIsDismissed(false), []);
+
+  // Skip synthetic enter/leave fired when a child changes visibility (relatedTarget stays inside the wrapper).
+  const handleMouseEnterAndLeave = useCallback(e => {
+    const related = e.relatedTarget;
+    if (related instanceof Node && e.currentTarget.contains(related)) return;
+    setIsDismissed(false);
+  }, []);
   const InlineTipWrapper = isHoverType ? ToolTipWrapper : InfoTipWrapper;
   const InlineTipBodyWrapper = isHoverType ? ToolTipContainer : InfoTipContainer;
-  const inlineWrapperProps = isHoverType ? {} : {
+  const inlineWrapperProps = isHoverType ? {
+    'data-tooltip-body': ''
+  } : {
     hideTip: isTipHidden
   };
   const tipWrapperProps = isHoverType ? {
-    inheritDims
+    inheritDims,
+    dismissed: isDismissed
   } : {};
   const tipBodyAlignment = getAlignmentStyles({
     alignment,
     avatar,
@@ -42,8 +59,10 @@
   const target = /*#__PURE__*/_jsx(TargetContainer, {
     height: inheritDims ? 'inherit' : undefined,
     ref: wrapperRef,
     width: inheritDims ? 'inherit' : undefined,
+    onBlur: isHoverType ? handleUndismissed : undefined,
+    onClick: isHoverType ? handleClick : undefined,
     onKeyDown: escapeKeyPressHandler,
     children: children
   });
   const tipBody = /*#__PURE__*/_jsx(InlineTipBodyWrapper, {
@@ -77,8 +96,10 @@
     })
   });
   return /*#__PURE__*/_jsx(InlineTipWrapper, {
     ...tipWrapperProps,
+    onMouseEnter: isHoverType ? handleMouseEnterAndLeave : undefined,
+    onMouseLeave: isHoverType ? handleMouseEnterAndLeave : undefined,
     children: alignment.includes('top') ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [tipBody, target]
     }) : /*#__PURE__*/_jsxs(_Fragment, {
       children: [target, tipBody]