chore(tooltip): clean up code structure

heroui-inc · Feb 23, 2025 · 6336424 · 6336424
1 parent 40e714d
commit 6336424
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 43 deletions.
diff --git a/packages/components/tooltip/src/tooltip.tsx b/packages/components/tooltip/src/tooltip.tsx
@@ -62,9 +62,9 @@ const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => {
   const {ref: tooltipRef, id, style, ...otherTooltipProps} = getTooltipProps();
 
   const animatedContent = (
-    <div key={id + "-tooltip-content"} ref={tooltipRef} id={id} style={style}>
+    <div key={`${id}-tooltip-content`} ref={tooltipRef} id={id} style={style}>
       <m.div
-        key={id + "-tooltip-inner"}
+        key={`${id}-tooltip-inner`}
         animate="enter"
         exit="exit"
         initial="exit"
@@ -80,7 +80,7 @@ const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => {
   );
 
   return (
-    <LazyMotion features={domAnimation}>
+    <>
       {trigger}
       {disableAnimation ? (
         isOpen && (
@@ -91,15 +91,17 @@ const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => {
           </OverlayContainer>
         )
       ) : (
-        <AnimatePresence>
-          {isOpen && (
-            <OverlayContainer key={id + "-overlay"} portalContainer={portalContainer}>
-              {animatedContent}
-            </OverlayContainer>
-          )}
-        </AnimatePresence>
+        <LazyMotion features={domAnimation}>
+          <AnimatePresence>
+            {isOpen && (
+              <OverlayContainer portalContainer={portalContainer}>
+                {animatedContent}
+              </OverlayContainer>
+            )}
+          </AnimatePresence>
+        </LazyMotion>
       )}
-    </LazyMotion>
+    </>
   );
 });
 

diff --git a/packages/components/tooltip/stories/tooltip.stories.tsx b/packages/components/tooltip/stories/tooltip.stories.tsx
@@ -156,41 +156,25 @@ const OffsetTemplate = (args: TooltipProps) => (
   </div>
 );
 
-const MultipleTemplate = (args: TooltipProps) => {
-  const ManyTooltipComponent = ({
-    content,
-    tooltipProps,
-  }: {
-    content: React.ReactNode;
-    tooltipProps: TooltipProps;
-  }) => {
-    return (
-      <Tooltip {...tooltipProps} closeDelay={0} content={content} openDelay={0}>
-        <Button>Hover me</Button>
+const MultipleTemplate = (args: TooltipProps) => (
+  <div className="flex flex-col gap-5">
+    <div className="flex gap-2">
+      <Tooltip {...args} content="Tooltip 1" delay={1000}>
+        <Button>Hover me (delay 1000ms)</Button>
       </Tooltip>
-    );
-  };
-
-  const tooltipIndex = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
-
-  return (
-    <div className="flex flex-col gap-5">
-      <div className="flex gap-2">
-        <Tooltip {...args} content="Tooltip 1" delay={1000}>
-          <Button>Hover me (delay 1000ms)</Button>
-        </Tooltip>
-        <Tooltip {...args} content="Tooltip 2">
-          <Button>Then hover me</Button>
+      <Tooltip {...args} content="Tooltip 2">
+        <Button>Then hover me</Button>
+      </Tooltip>
+    </div>
+    <div className="grid grid-cols-3 gap-2">
+      {Array.from({length: 21}).map((_, index) => (
+        <Tooltip {...args} key={index} closeDelay={0} content={`Tooltip ${index}`} openDelay={0}>
+          <Button>Hover me</Button>
         </Tooltip>
-      </div>
-      <div className="grid grid-cols-3 gap-2">
-        {tooltipIndex.map((index) => (
-          <ManyTooltipComponent key={index} content={`Tooltip ${index}`} tooltipProps={args} />
-        ))}
-      </div>
+      ))}
     </div>
-  );
-};
+  </div>
+);
 
 const PlacementsTemplate = (args: TooltipProps) => {
   return (