fix: Tooltip delays

webstudio-is · Sep 25, 2024 · 1cc47ee · 1cc47ee
1 parent a0bce72
commit 1cc47ee
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/packages/design-system/src/components/tooltip.stories.tsx b/packages/design-system/src/components/tooltip.stories.tsx
@@ -1,12 +1,37 @@
-import { InputErrorsTooltip, TooltipProvider } from "./tooltip";
+import {
+  InputErrorsTooltip,
+  TooltipProvider,
+  Tooltip as TooltipDesign,
+} from "./tooltip";
 import { Button } from "./button";
 import { Box } from "./box";
+import { InputField } from "./input-field";
 
 export default {
   title: "Library/Tooltip",
 };
 
-const TooltipStory = () => {
+export const TooltipDelay = () => {
+  return (
+    <TooltipProvider>
+      <TooltipDesign content="HELLO" delayDuration={1000}>
+        <Button>Hover me</Button>
+      </TooltipDesign>
+
+      <InputErrorsTooltip errors={[]} side={"right"}>
+        <InputField
+          id="input"
+          placeholder="Input"
+          css={{
+            width: 200,
+          }}
+        />
+      </InputErrorsTooltip>
+    </TooltipProvider>
+  );
+};
+
+export const Tooltip = () => {
   return (
     <TooltipProvider>
       <Box>Some content</Box>
@@ -59,5 +84,3 @@ const TooltipStory = () => {
     </TooltipProvider>
   );
 };
-
-export { TooltipStory as Tooltip };
diff --git a/packages/design-system/src/components/tooltip.tsx b/packages/design-system/src/components/tooltip.tsx
@@ -218,7 +218,11 @@ export const InputErrorsTooltip = ({
         collisionBoundary={collisionBoundary as never}
         collisionPadding={-8}
         hideWhenDetached={true}
-        content={content ?? " "}
+        content={
+          errors !== undefined && errors.length !== 0
+            ? (content ?? " ")
+            : undefined
+        }
         open={errors !== undefined && errors.length !== 0}
         side={side ?? "right"}
         css={css}