From d370504d59a918ebf7d07d78482ff0b0d47bff7b Mon Sep 17 00:00:00 2001
From: healtheloper <super0872@naver.com>
Date: Tue, 7 Nov 2023 15:26:32 +0900
Subject: [PATCH] =?UTF-8?q?Tooltip=20visible=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=ED=96=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Tooltip/Tooltip.tsx        | 16 ++++++++--
 .../Tooltip/stories/Tooltip.stories.tsx       | 30 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/packages/co-design-core/src/components/Tooltip/Tooltip.tsx b/packages/co-design-core/src/components/Tooltip/Tooltip.tsx
index 3a203e20..56bfc195 100644
--- a/packages/co-design-core/src/components/Tooltip/Tooltip.tsx
+++ b/packages/co-design-core/src/components/Tooltip/Tooltip.tsx
@@ -11,6 +11,11 @@ import { Stack } from '../Stack';
 export type TooltipStylesNames = ClassNames<typeof useStyles>;
 
 export interface TooltipProps extends CoComponentProps<TooltipStylesNames>, React.ComponentPropsWithoutRef<'div'> {
+  /**
+   * Tooltip 의 초기 visible 상태를 설정합니다
+   */
+  initVisible?: boolean;
+
   /**
    * true일 경우 Tooltip 컴포넌트를 보여줍니다.
    * Tooltip 컴포넌트를 직접 제어할 경우 사용하는 속성입니다.
@@ -84,7 +89,8 @@ const getPositionStyle = (placement: TooltipPlacement, target?: HTMLElement) =>
 
 export const Tooltip = ({
   children,
-  visible = false,
+  visible,
+  initVisible = false,
   colorScheme,
   title,
   label,
@@ -111,7 +117,7 @@ export const Tooltip = ({
     { overrideStyles, name: 'Tooltip' },
   );
 
-  const [currentVisible, setCurrentVisible] = useToggle(visible);
+  const [currentVisible, setCurrentVisible] = useToggle(initVisible);
   const balloonRef = useRef<HTMLDivElement>(null);
   const targetRef = useClickAway<HTMLDivElement>((e: MouseEvent) => {
     if (
@@ -138,6 +144,10 @@ export const Tooltip = ({
   const handleFocus = trigger === 'focus' ? () => setCurrentVisible(true) : undefined;
   const handleBlur = trigger === 'focus' ? () => setCurrentVisible(false) : undefined;
 
+  useUpdateEffect(() => {
+    setCurrentVisible(visible);
+  }, [visible]);
+
   useUpdateEffect(() => {
     onChangeVisible?.(currentVisible);
   }, [currentVisible]);
@@ -145,7 +155,7 @@ export const Tooltip = ({
   const contentStyle: React.CSSProperties = {
     width: width ? width : 'auto',
     whiteSpace: width ? 'normal' : 'nowrap',
-    pointerEvents: visible ? 'all' : 'none',
+    pointerEvents: currentVisible ? 'all' : 'none',
   };
   const positionStyle = getPositionStyle(placement, targetRef.current);
 
diff --git a/packages/co-design-core/src/components/Tooltip/stories/Tooltip.stories.tsx b/packages/co-design-core/src/components/Tooltip/stories/Tooltip.stories.tsx
index 2671f4e8..265cbf96 100644
--- a/packages/co-design-core/src/components/Tooltip/stories/Tooltip.stories.tsx
+++ b/packages/co-design-core/src/components/Tooltip/stories/Tooltip.stories.tsx
@@ -1,6 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { StoryObj } from '@storybook/react';
 import { Center } from '../../Center';
 import { Tooltip } from '../Tooltip';
+import { Popover } from '../../Popover';
+import { Button } from '../../Button';
+import { Menu } from '../../Menu';
 
 export default {
   title: '@co-design/core/Tooltip',
@@ -65,3 +69,27 @@ export const WithTitle = {
     title: 'Title',
   },
 };
+
+export const WithPopover: StoryObj = {
+  render: (arg) => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+    return (
+      <Popover
+        placement="bottom"
+        onOpen={() => setIsPopoverOpen(true)}
+        onClose={() => setIsPopoverOpen(false)}
+        content={
+          <Menu>
+            <Menu.Item>1</Menu.Item>
+            <Menu.Item>2</Menu.Item>
+          </Menu>
+        }
+      >
+        <Tooltip visible={!isPopoverOpen} label="Peek-A-Boo" {...arg}>
+          <Button>hello</Button>
+        </Tooltip>
+      </Popover>
+    );
+  },
+};