diff --git a/packages/react/src/components/Tooltip/Tooltip.styles.tsx b/packages/react/src/components/Tooltip/Tooltip.styles.tsx
index c3d9f5b..86f0d39 100644
--- a/packages/react/src/components/Tooltip/Tooltip.styles.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.styles.tsx
@@ -1,59 +1,29 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { NormalColorType, palette } from '../../theme';
-import { TooltipIconPlacement, TooltipPlacement } from './placement';
+import { motion } from 'framer-motion';
 
 export const StyledTooltipTrigger = styled.div`
   width: max-content;
   display: inherit;
 `;
 
-export const StyledTooltipArrow = styled.div<{
-  tooltipIconPlacement: TooltipIconPlacement;
-}>`
+export const StyledTooltipArrow = styled(motion.div)`
   border-radius: 0 0 2px 0;
   position: absolute;
   width: 12px;
   height: 12px;
   background-color: #ccc;
   opacity: 0;
-  transition: 0.1s ease-in-out;
-
-  ${({ tooltipIconPlacement }) => css`
-    top: ${tooltipIconPlacement.top};
-    left: ${tooltipIconPlacement.left};
-    right: ${tooltipIconPlacement.right};
-    bottom: ${tooltipIconPlacement.bottom};
-    transform: ${tooltipIconPlacement.transform};
-  `};
 `;
 
-export const StyledTooltipContent = styled.div<{
-  visible: boolean;
+export const StyledTooltipContent = styled(motion.div)<{
   color: NormalColorType;
-  tooltipPlacement: TooltipPlacement;
 }>`
   position: absolute;
   border-radius: 14px;
   padding: 8px 12px;
   opacity: 0;
-  transition: 0.1s ease-in-out;
-
-  ${({ tooltipPlacement }) => css`
-    top: calc(${tooltipPlacement.top} + 6px);
-    left: ${tooltipPlacement.left};
-    transform: ${tooltipPlacement.transform};
-  `};
-
-  ${({ visible, tooltipPlacement }) =>
-    visible &&
-    css`
-      opacity: 1;
-      top: ${tooltipPlacement.top};
-      ${StyledTooltipArrow} {
-        opacity: 1;
-      }
-    `};
 
   ${({ color }) => css`
     background-color: ${palette[color]};
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx
index b54549b..712ff98 100644
--- a/packages/react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.tsx
@@ -20,6 +20,7 @@ export interface TooltipProps {
  * </Tooltip>
  * ```
  */
+
 export const Tooltip = ({
   children,
   placement = 'top',
@@ -30,7 +31,6 @@ export const Tooltip = ({
 }: TooltipProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const [visible, setVisible] = useState(false);
-  const timer = useRef<number>();
 
   const contentProps = {
     placement,
@@ -41,22 +41,7 @@ export const Tooltip = ({
   };
 
   const handleChangeVisible = (nextState: boolean) => {
-    const clear = () => {
-      clearTimeout(timer.current);
-      timer.current = undefined;
-    };
-    const handler = (nextState: boolean) => {
-      setVisible(nextState);
-      clear();
-    };
-
-    clear();
-    if (nextState) {
-      timer.current = window.setTimeout(() => handler(true), 100);
-
-      return;
-    }
-    timer.current = window.setTimeout(() => handler(false), 100);
+    setVisible(nextState);
   };
 
   return (
diff --git a/packages/react/src/components/Tooltip/TooltipContent.tsx b/packages/react/src/components/Tooltip/TooltipContent.tsx
index a79e7dd..d3dac43 100644
--- a/packages/react/src/components/Tooltip/TooltipContent.tsx
+++ b/packages/react/src/components/Tooltip/TooltipContent.tsx
@@ -11,6 +11,7 @@ import {
   getRect,
 } from './placement';
 import { NormalColorType } from '../../theme';
+import { AnimatePresence } from 'framer-motion';
 
 interface TooltipContentProps {
   placement?: Placement;
@@ -54,28 +55,56 @@ export const TooltipContent = ({
   if (!el) return null;
 
   return createPortal(
-    <S.StyledTooltipContent
-      visible={visible}
-      tooltipPlacement={{
-        left: rect.left,
-        top: rect.top,
-        transform: rect.transform,
-      }}
-      color={color}
-    >
-      <S.StyledTooltip>
-        <S.StyledTooltipArrow
-          tooltipIconPlacement={{
-            left,
-            top,
-            right,
-            bottom,
-            transform,
+    <AnimatePresence>
+      {visible && (
+        <S.StyledTooltipContent
+          color={color}
+          initial={{
+            top: `calc(${rect.top} + 6px)`,
+            left: rect.left,
+            transform: rect.transform,
+            opacity: 0,
           }}
-        />
-        {children}
-      </S.StyledTooltip>
-    </S.StyledTooltipContent>,
+          animate={{
+            opacity: 1,
+            top: rect.top,
+          }}
+          exit={{
+            top: `calc(${rect.top} + 6px)`,
+            left: rect.left,
+            transform: rect.transform,
+            opacity: 0,
+          }}
+          transition={{
+            duration: 0.2,
+            ease: 'easeInOut',
+          }}
+        >
+          <S.StyledTooltip>
+            <S.StyledTooltipArrow
+              style={{
+                top,
+                left,
+                right,
+                bottom,
+                transform,
+              }}
+              initial={{
+                opacity: 0,
+              }}
+              animate={{
+                opacity: 1,
+              }}
+              transition={{
+                duration: 0.2,
+                ease: 'easeInOut',
+              }}
+            />
+            {children}
+          </S.StyledTooltip>
+        </S.StyledTooltipContent>
+      )}
+    </AnimatePresence>,
     el,
   );
 };