diff --git a/lib/src/components/Popover/popover.types.ts b/lib/src/components/Popover/popover.types.ts
index 59a93f5..64e2f22 100644
--- a/lib/src/components/Popover/popover.types.ts
+++ b/lib/src/components/Popover/popover.types.ts
@@ -1,10 +1,11 @@
+import { ReactNode } from "react";
 import { positionType } from "../_internal/Types/types";
 
 type divType = Omit<JSX.IntrinsicElements["div"], "onChange">;
 
 export type PopoverType = divType & {
   position?: positionType;
-  content: JSX.Element;
+  content: ReactNode;
   offset?: string;
   borderRadius?: string;
   width?: string;
diff --git a/lib/src/components/Tooltip/Tooltip.tsx b/lib/src/components/Tooltip/Tooltip.tsx
index 2343dd0..3f29185 100644
--- a/lib/src/components/Tooltip/Tooltip.tsx
+++ b/lib/src/components/Tooltip/Tooltip.tsx
@@ -1,23 +1,8 @@
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import {
-  forwardRef,
-  ForwardRefRenderFunction,
-  KeyboardEvent,
-  MutableRefObject,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { useClickOutside } from "../../hooks/useClickOutside";
-import {
-  labelRecipe,
-  toolArrowOffset,
-  toolArrowSize,
-  toolOffset,
-  tooltipContainerStyles,
-  toolRadius,
-  toolWidth,
-} from "./tooltip.styles.css";
+import { forwardRef, ForwardRefRenderFunction } from "react";
+import { tooltipContainerStyles } from "./tooltip.styles.css";
+import { Popover } from "../Popover";
+
 import { TooltipType } from "./tooltip.types";
 
 const TooltipComponent: ForwardRefRenderFunction<
@@ -26,130 +11,33 @@ const TooltipComponent: ForwardRefRenderFunction<
 > = (
   {
     children,
-    position = "bottom",
     label,
-    offset = "4px",
-    borderRadius = "4px",
-    width = "fit-content",
-    withArrow = false,
-    arrowSize = "7px",
-    isOpened,
-    onChange = () => {},
-    className,
-    style,
-    zIndex = "1",
     color = "#2C2E33",
     labelColor = "white",
     multiLine = false,
+    className,
+    style,
+    ...props
   },
   ref
 ) => {
-  const [isOpen, setIsOpen] = useState<boolean | null>(null);
-  const [targetWidth, setTargetWidth] = useState("");
-  const toolRef = useRef() as MutableRefObject<HTMLDivElement>;
-  const labelRef = useRef() as MutableRefObject<HTMLDivElement>;
-  const targetRef = useRef() as MutableRefObject<HTMLDivElement>;
-
-  useEffect(() => {
-    isOpened !== undefined && setIsOpen(isOpened);
-  }, [isOpened]);
-
-  useEffect(() => {
-    isOpen !== null && onChange(isOpen!);
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (width === "target") {
-      setTargetWidth(getTargetWidth());
-    } else {
-      setTargetWidth(width);
-    }
-  }, [width, targetRef.current]);
-
-  useClickOutside(
-    toolRef,
-    () => {
-      isOpened === undefined && setIsOpen(false);
-    },
-    isOpen!
-  );
-
-  const internalClickHandler = () => {
-    isOpened === undefined && setIsOpen(!isOpen);
-  };
-  const internalKeyDownHandler = (event: KeyboardEvent<HTMLDivElement>) => {
-    switch (event.code) {
-      case "Space":
-      case "Enter":
-        event.preventDefault();
-        internalClickHandler();
-        break;
-      case "Escape":
-        event.preventDefault();
-        isOpened === undefined && setIsOpen(false);
-        break;
-      default:
-        break;
-    }
-  };
-
-  const getTargetWidth = () => {
-    return `${targetRef?.current?.offsetWidth}px`;
-  };
-
-  const labelContainerStyles = labelRecipe({
-    position,
-    withArrow: withArrow ? true : false,
-  });
-
   return (
-    <div
-      className={`${tooltipContainerStyles}`}
-      ref={toolRef}
-      style={assignInlineVars({
-        [toolOffset]: withArrow
-          ? `${Math.hypot(parseInt(arrowSize) + 2) / 2 + parseInt(offset)}px`
-          : offset,
-        [toolRadius]: borderRadius,
-        [toolWidth]: targetWidth,
-        [toolArrowSize]: arrowSize,
-        [toolArrowOffset]: `-${Math.hypot(parseInt(arrowSize)) / 2}px`,
-      })}
+    <Popover
+      ref={ref}
+      style={{
+        ...assignInlineVars({
+          backgroundColor: color,
+          color: labelColor,
+          whiteSpace: multiLine ? "wrap" : "nowrap",
+        }),
+        ...style,
+      }}
+      content={label}
+      className={`${tooltipContainerStyles} ${className}`}
+      {...props}
     >
-      <div
-        ref={targetRef}
-        onClick={internalClickHandler}
-        onKeyDown={internalKeyDownHandler}
-      >
-        {children}
-      </div>
-      {isOpen && (
-        <div
-          aria-expanded={isOpen}
-          role="dialog"
-          ref={(node) => {
-            labelRef.current = node as HTMLDivElement;
-            if (typeof ref === "function") {
-              ref(node);
-            } else if (ref) {
-              ref.current = node;
-            }
-          }}
-          style={{
-            ...assignInlineVars({
-              zIndex,
-              backgroundColor: color,
-              color: labelColor,
-              whiteSpace: multiLine ? "wrap" : "nowrap",
-            }),
-            ...style,
-          }}
-          className={`${labelContainerStyles} ${className}`}
-        >
-          {label}
-        </div>
-      )}
-    </div>
+      {children}
+    </Popover>
   );
 };
 
diff --git a/lib/src/components/Tooltip/tooltip.styles.css.ts b/lib/src/components/Tooltip/tooltip.styles.css.ts
index 2a456a0..9077039 100644
--- a/lib/src/components/Tooltip/tooltip.styles.css.ts
+++ b/lib/src/components/Tooltip/tooltip.styles.css.ts
@@ -1,216 +1,5 @@
-import { createTheme, createVar, style } from "@vanilla-extract/css";
-import { calc } from "@vanilla-extract/css-utils";
-import { recipe } from "@vanilla-extract/recipes";
-
-export const toolOffset: string = createVar();
-export const toolRadius: string = createVar();
-export const toolWidth: string = createVar();
-export const toolArrowSize: string = createVar();
-export const toolArrowOffset: string = createVar();
+import { style } from "@vanilla-extract/css";
 
 export const tooltipContainerStyles = style({
-  position: "relative",
-  height: "fit-content",
-  width: "fit-content",
-});
-
-export const labelRecipe = recipe({
-  base: {
-    boxSizing: "border-box",
-    position: "absolute",
-    borderRadius: toolRadius,
-    padding: "6px 10px",
-    color: "white",
-    width: toolWidth,
-    boxShadow: " rgba(0, 0, 0, 0.08) 0px 4px 12px",
-  },
-  variants: {
-    position: {
-      bottom: {
-        top: calc.add("100%", toolOffset),
-        left: "50%",
-        transform: "translateX(-50%)",
-      },
-      left: {
-        top: "50%",
-        right: calc.add("100%", toolOffset),
-        transform: "translateY(-50%)",
-      },
-      right: {
-        top: "50%",
-        left: calc.add("100%", toolOffset),
-        transform: "translateY(-50%)",
-      },
-      top: {
-        bottom: calc.add("100%", toolOffset),
-        left: "50%",
-        transform: "translateX(-50%)",
-      },
-      "bottom-end": {
-        top: calc.add(toolOffset, "100%"),
-        right: 0,
-      },
-      "bottom-start": {
-        top: calc.add("100%", toolOffset),
-        left: 0,
-      },
-      "left-end": {
-        bottom: 0,
-        right: calc.add("100%", toolOffset),
-      },
-      "left-start": {
-        top: 0,
-        right: calc.add("100%", toolOffset),
-      },
-      "right-end": {
-        bottom: 0,
-        left: calc.add("100%", toolOffset),
-      },
-      "right-start": {
-        top: 0,
-        left: calc.add("100%", toolOffset),
-      },
-      "top-end": {
-        bottom: calc.add("100%", toolOffset),
-        right: 0,
-      },
-      "top-start": {
-        bottom: calc.add("100%", toolOffset),
-        left: 0,
-      },
-    },
-    withArrow: {
-      true: {
-        ":after": {
-          content: "",
-          position: "absolute",
-          height: toolArrowSize,
-          width: toolArrowSize,
-          backgroundColor: "inherit",
-        },
-      },
-    },
-  },
-  compoundVariants: [
-    {
-      variants: { withArrow: true, position: "bottom" },
-      style: {
-        ":after": {
-          left: calc.subtract("50%", calc.divide(toolArrowSize, 2)),
-          top: toolArrowOffset,
-          transform: "rotate(45deg)",
-        },
-      },
-    },
-    {
-      variants: { withArrow: true, position: "bottom-start" },
-      style: {
-        ":after": {
-          left: toolRadius,
-          top: toolArrowOffset,
-          transform: "rotate(45deg)",
-        },
-      },
-    },
-    {
-      variants: { withArrow: true, position: "bottom-end" },
-      style: {
-        ":after": {
-          right: toolRadius,
-          top: toolArrowOffset,
-          transform: "rotate(45deg)",
-        },
-      },
-    },
-    {
-      variants: { withArrow: true, position: "left" },
-      style: {
-        ":after": {
-          top: calc.subtract("50%", calc.divide(toolArrowSize, 2)),
-          right: toolArrowOffset,
-          transform: "rotate(135deg)",
-        },
-      },
-    },
-    {
-      variants: { withArrow: true, position: "left-end" },
-      style: {
-        ":after": {
-          bottom: toolRadius,
-          right: toolArrowOffset,
-          transform: "rotate(135deg)",
-        },
-      },
-    },
-    {
-      variants: { withArrow: true, position: "left-start" },
-      style: {
-        ":after": {
-          top: toolRadius,
-          right: toolArrowOffset,
-          transform: "rotate(135deg)",
-        },
-      },
-    },
-    {
-      variants: { withArrow: true, position: "right" },
-      style: {
-        ":after": {
-          top: calc.subtract("50%", calc.divide(toolArrowSize, 2)),
-          left: toolArrowOffset,
-          transform: "rotate(-45deg)",
-        },
-      },
-    },
-    {
-      variants: { withArrow: true, position: "right-start" },
-      style: {
-        ":after": {
-          top: toolRadius,
-          left: toolArrowOffset,
-          transform: "rotate(-45deg)",
-        },
-      },
-    },
-    {
-      variants: { withArrow: true, position: "right-end" },
-      style: {
-        ":after": {
-          bottom: toolRadius,
-          left: toolArrowOffset,
-          transform: "rotate(-45deg)",
-        },
-      },
-    },
-    {
-      variants: { withArrow: true, position: "top" },
-      style: {
-        ":after": {
-          left: calc.subtract("50%", calc.divide(toolArrowSize, 2)),
-          bottom: toolArrowOffset,
-          transform: "rotate(-135deg)",
-        },
-      },
-    },
-    {
-      variants: { withArrow: true, position: "top-start" },
-      style: {
-        ":after": {
-          left: toolRadius,
-          bottom: toolArrowOffset,
-          transform: "rotate(-135deg)",
-        },
-      },
-    },
-    {
-      variants: { withArrow: true, position: "top-end" },
-      style: {
-        ":after": {
-          right: toolRadius,
-          bottom: toolArrowOffset,
-          transform: "rotate(-135deg)",
-        },
-      },
-    },
-  ],
+  padding: "6px 10px",
 });
diff --git a/lib/src/components/Tooltip/tooltip.types.ts b/lib/src/components/Tooltip/tooltip.types.ts
index a235022..1b33e72 100644
--- a/lib/src/components/Tooltip/tooltip.types.ts
+++ b/lib/src/components/Tooltip/tooltip.types.ts
@@ -1,19 +1,10 @@
-import { FC } from "react";
-import { positionType } from "../_internal/Types/types";
+import { PopoverType } from "../Popover/popover.types";
 
-type divType = Omit<JSX.IntrinsicElements["div"], "onChange">;
+type divType = Omit<JSX.IntrinsicElements["div"], "ref"> &
+  Omit<PopoverType, "content" | "ref">;
 
 export type TooltipType = divType & {
-  position?: positionType;
   label: string | number;
-  offset?: string;
-  borderRadius?: string;
-  width?: string;
-  withArrow?: boolean;
-  arrowSize?: string;
-  isOpened?: boolean;
-  onChange?: (isOpened: boolean) => void;
-  zIndex?: string;
   color?: string;
   labelColor?: string;
   multiLine?: boolean;