From 0480f8f72ca148380ddd4e7d6c7338ff02a37b1d Mon Sep 17 00:00:00 2001
From: alcercu <333aleix333@gmail.com>
Date: Wed, 18 Dec 2024 10:59:32 +0100
Subject: [PATCH 1/2] feat: use transition instead of animation for the
 tooltips

---
 src/lib/tooltip/index.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/lib/tooltip/index.tsx b/src/lib/tooltip/index.tsx
index 046e09e..123d0ff 100644
--- a/src/lib/tooltip/index.tsx
+++ b/src/lib/tooltip/index.tsx
@@ -1,10 +1,6 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import {
-  borderBox,
-  fadeIn,
-  small as smallStyle,
-} from "../../styles/common-style";
+import { borderBox, small as smallStyle } from "../../styles/common-style";
 
 export interface TooltipBaseProps {
   place?: "left" | "right" | "top" | "bottom";
@@ -91,8 +87,10 @@ const Tip = styled.div<TooltipBaseProps>`
 
 const StyledTooltip = styled.span<TooltipBaseProps>`
   ${borderBox}
+  transition: opacity 0.5s, visibility 0.5s;
   ${({ place, theme, small }) => css`
     visibility: hidden;
+    opacity: 0%;
     position: absolute;
     z-index: 1;
     width: max-content;
@@ -145,7 +143,7 @@ const Wrapper = styled.div`
 
   &:hover ${StyledTooltip} {
     visibility: visible;
-    animation: ${fadeIn} 200ms ease-in;
+    opacity: 100%;
   }
 `;
 

From fe4127f73ddccddfadc8b6a65520e97ed3281791 Mon Sep 17 00:00:00 2001
From: alcercu <333aleix333@gmail.com>
Date: Wed, 18 Dec 2024 11:16:49 +0100
Subject: [PATCH 2/2] fix: reduce time and add timing function

---
 src/lib/tooltip/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/tooltip/index.tsx b/src/lib/tooltip/index.tsx
index 123d0ff..884b357 100644
--- a/src/lib/tooltip/index.tsx
+++ b/src/lib/tooltip/index.tsx
@@ -87,7 +87,7 @@ const Tip = styled.div<TooltipBaseProps>`
 
 const StyledTooltip = styled.span<TooltipBaseProps>`
   ${borderBox}
-  transition: opacity 0.5s, visibility 0.5s;
+  transition: opacity 200ms ease-in, visibility 200ms ease-in;
   ${({ place, theme, small }) => css`
     visibility: hidden;
     opacity: 0%;