add safe polygon on hover

daostack · Dec 19, 2023 · 4c2ee15 · 4c2ee15
1 parent a055b53
commit 4c2ee15
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx b/src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx
@@ -59,6 +59,7 @@ const LinkedItemMark: FC<LinkedItemMarkProps> = (props) => {
       open={isOpen}
       onOpenChange={setIsOpen}
       placement={isTabletView ? "bottom-start" : "right"}
+      shouldOpenOnHover={!isTabletView}
     >
       <TooltipTrigger onClick={toggleTooltip} asChild>
         <ButtonIcon>

diff --git a/src/shared/ui-kit/Tooltip/hooks/useTooltip.ts b/src/shared/ui-kit/Tooltip/hooks/useTooltip.ts
@@ -4,6 +4,7 @@ import {
   autoUpdate,
   offset,
   flip,
+  safePolygon,
   shift,
   arrow,
   useHover,
@@ -20,9 +21,12 @@ export const useTooltip = (options: TooltipOptions = {}) => {
     placement = "top",
     open: controlledOpen,
     onOpenChange: setControlledOpen,
+    shouldOpenOnHover = false,
   } = options;
   const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
   const arrowRef = useRef<HTMLDivElement>(null);
+  const shouldEnableHover =
+    shouldOpenOnHover ?? typeof controlledOpen === "undefined";
 
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
@@ -46,7 +50,8 @@ export const useTooltip = (options: TooltipOptions = {}) => {
 
   const hover = useHover(context, {
     move: false,
-    enabled: typeof controlledOpen === "undefined",
+    enabled: shouldEnableHover,
+    handleClose: shouldEnableHover ? safePolygon() : null,
   });
   const focus = useFocus(context, {
     enabled: typeof controlledOpen === "undefined",

diff --git a/src/shared/ui-kit/Tooltip/types.ts b/src/shared/ui-kit/Tooltip/types.ts
@@ -5,4 +5,5 @@ export interface TooltipOptions {
   placement?: Placement;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  shouldOpenOnHover?: boolean;
 }