From 329ddea871afe01dbdb1ecc6886042bbf05c68d2 Mon Sep 17 00:00:00 2001
From: Ivan Starkov <istarkov@gmail.com>
Date: Wed, 25 Sep 2024 20:36:29 +0300
Subject: [PATCH] fix: Tooltip delay removed when doing things other than
 hovering over tooltip trigger (#4162)

## Description

closes #3477

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 .../src/components/tooltip.stories.tsx        | 31 ++++++++++++++++---
 .../design-system/src/components/tooltip.tsx  |  6 +++-
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/src/components/tooltip.stories.tsx b/packages/design-system/src/components/tooltip.stories.tsx
index c36955b7c5..5b4296b8c4 100644
--- 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
index 8686b89239..bfbe78c53b 100644
--- 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}