Merge pull request #41 from cobaltinc/park/tooltip-visible

Tooltip visible 로직 수정했다
cobaltinc · Nov 8, 2023 · 49710f5 · 49710f5
2 parents 11e483d + d370504
commit 49710f5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git 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,14 +144,18 @@ 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]);
 
   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
@@ -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>
+    );
+  },
+};