diff --git a/src/components/Label/Label.styles.ts b/src/components/Label/Label.styles.ts
index 8df71119..2c9a3f54 100644
--- a/src/components/Label/Label.styles.ts
+++ b/src/components/Label/Label.styles.ts
@@ -20,6 +20,7 @@ export const defaultConfig = {
       display: 'flex',
       alignItems: 'center',
       minHeight: '$size-xSmall',
+      justifyContent: 'center',
     },
     optional: {
       color: '$color-content-tertiary',
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 54d4af35..baf1f746 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -4,6 +4,7 @@ import { type FC, useMemo } from 'react';
 import type { LabelProps } from './Label.props';
 import { stylesBuilder } from './stylesBuilder';
 import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
 
 import { tet } from '@/tetrisly';
 import type { MarginProps } from '@/types/MarginProps';
@@ -26,11 +27,14 @@ export const Label: FC<LabelProps & MarginProps> = ({
           {optional}
         </tet.span>
       )}
-      {/* TODO: add tooltip instead of bare icon, when we get one */}
       {tooltip && (
-        <tet.span {...styles.tooltip} data-testid="label-tooltip">
+        <Tooltip
+          {...styles.tooltip}
+          text="label tooltip"
+          data-testid="label-tooltip"
+        >
           <Icon name="16-info" />
-        </tet.span>
+        </Tooltip>
       )}
       {!!action && (
         <Button
diff --git a/src/components/Tooltip/Arrow.tsx b/src/components/Tooltip/Arrow.tsx
new file mode 100644
index 00000000..5ec2d59d
--- /dev/null
+++ b/src/components/Tooltip/Arrow.tsx
@@ -0,0 +1,84 @@
+import { FC } from 'react';
+
+import { TooltipPositionType } from './Tooltip.props';
+
+import { tet } from '@/tetrisly';
+
+type ArrowObjectProps = {
+  pathDefinition: string;
+  viewBox: string;
+  height: number;
+  width: number;
+};
+
+const ArrowObject = ({
+  pathDefinition,
+  viewBox,
+  height,
+  width,
+}: ArrowObjectProps) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <tet.path d={pathDefinition} fill="$color-background-inverted" />
+  </svg>
+);
+
+type ArrowProps = {
+  arrowType: TooltipPositionType;
+};
+
+export const Arrow: FC<ArrowProps> = ({ arrowType }) => {
+  switch (arrowType) {
+    case 'bottom':
+      return (
+        <ArrowObject
+          width={12}
+          height={6}
+          viewBox="0 0 12 6"
+          pathDefinition="M0 6H12L7.41421 1.41421C6.63317 0.633166 5.36684 0.633165 4.58579 1.41421L0 6Z"
+        />
+      );
+    case 'top':
+      return (
+        <ArrowObject
+          width={12}
+          height={6}
+          viewBox="0 0 12 6"
+          pathDefinition="M0 0H12L7.41421 4.58579C6.63317 5.36683 5.36684 5.36684 4.58579 4.58579L0 0Z"
+        />
+      );
+
+    case 'right':
+      return (
+        <ArrowObject
+          width={6}
+          height={12}
+          viewBox="0 0 6 12"
+          pathDefinition="M6 12L6 0L1.41421 4.58579C0.633166 5.36683 0.633165 6.63316 1.41421 7.41421L6 12Z"
+        />
+      );
+    case 'left':
+      return (
+        <ArrowObject
+          width={6}
+          height={12}
+          viewBox="0 0 6 12"
+          pathDefinition="M0 12L0 0L4.58579 4.58579C5.36683 5.36683 5.36684 6.63316 4.58579 7.41421L0 12Z"
+        />
+      );
+    default:
+      return (
+        <ArrowObject
+          width={12}
+          height={6}
+          viewBox="0 0 12 6"
+          pathDefinition="M0 6H12L7.41421 1.41421C6.63317 0.633166 5.36684 0.633165 4.58579 1.41421L0 6Z"
+        />
+      );
+  }
+};
diff --git a/src/components/Tooltip/Tooltip.props.ts b/src/components/Tooltip/Tooltip.props.ts
new file mode 100644
index 00000000..d4240fe5
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.props.ts
@@ -0,0 +1,11 @@
+import { TooltipConfig } from './Tooltip.styles';
+
+export type ArrowheadPositionType = 'start' | 'middle' | 'end';
+export type TooltipPositionType = 'top' | 'bottom' | 'left' | 'right';
+
+export type TooltipProps = {
+  arrowheadPosition?: ArrowheadPositionType;
+  tooltipPosition?: TooltipPositionType;
+  text: string;
+  custom?: TooltipConfig;
+};
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
new file mode 100644
index 00000000..f859ce0b
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Tooltip } from './Tooltip';
+import { TooltipElement } from './TooltipElement';
+import { Button } from '../Button';
+
+import { TetDocs } from '@/docs-components/TetDocs';
+import { TooltipDocs } from '@/docs-components/TooltipDocs';
+import { tet } from '@/tetrisly';
+
+const meta = {
+  title: 'Tooltip',
+  component: TooltipElement,
+  tags: ['autodocs'],
+  args: {
+    text: 'Tooltip placeholder',
+    arrowheadPosition: 'start',
+    tooltipPosition: 'top',
+  },
+  argTypes: {
+    arrowheadPosition: {
+      options: ['start', 'middle', 'end'],
+      defaultValue: 'start',
+      control: { type: 'radio' },
+    },
+    tooltipPosition: {
+      options: ['top', 'bottom', 'left', 'right'],
+      defaultValue: 'top',
+      control: { type: 'radio' },
+    },
+  },
+  parameters: {
+    docs: {
+      Description: {
+        component:
+          'Brief, additional information or context that appears when the user hovers over or focuses on a particular element. Tooltips help provide explanations, hints, or tips without cluttering up the interface.',
+      },
+      page: () => (
+        <TetDocs docs="https://docs.tetrisly.com/components/list/tooltip">
+          <TooltipDocs />
+        </TetDocs>
+      ),
+    },
+  },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    arrowheadPosition: 'middle',
+    tooltipPosition: 'top',
+  },
+};
+
+export const WithButtonTootlip: Story = {
+  render: () => (
+    <tet.div
+      margin={20}
+      display="flex"
+      flexDirection="column"
+      alignItems="start"
+    >
+      <Tooltip
+        text="Button tooltip"
+        arrowheadPosition="end"
+        tooltipPosition="top"
+      >
+        <Button label="Button" />
+      </Tooltip>
+    </tet.div>
+  ),
+};
diff --git a/src/components/Tooltip/Tooltip.styles.ts b/src/components/Tooltip/Tooltip.styles.ts
new file mode 100644
index 00000000..320854e8
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.styles.ts
@@ -0,0 +1,63 @@
+import { BaseProps } from '@/types/BaseProps';
+
+export type TooltipConfig = {
+  innerElements?: {
+    arrow: BaseProps & {
+      right: BaseProps;
+      left: BaseProps;
+      top: BaseProps;
+      bottom: BaseProps;
+    };
+    content: BaseProps;
+    container: BaseProps;
+  };
+} & BaseProps;
+
+export const defaultConfig = {
+  display: 'inline-flex',
+  position: 'relative',
+  innerElements: {
+    arrow: {
+      right: {
+        padding: '$space-component-padding-small 0',
+        paddingLeft: '$space-component-padding-xSmall',
+      },
+      left: {
+        padding: '$space-component-padding-small 0',
+        paddingRight: '$space-component-padding-xSmall',
+      },
+      top: {
+        padding: '0 $space-component-padding-small',
+        paddingBottom: '$space-component-padding-xSmall',
+      },
+      bottom: {
+        padding: '0 $space-component-padding-small',
+        paddingTop: '$space-component-padding-xSmall',
+      },
+    },
+    content: {
+      backgroundColor: '$color-background-inverted',
+      color: '$color-content-primary-inverted',
+      padding: '$space-component-padding-xSmall $space-component-padding-small',
+      borderRadius: '$border-radius-medium',
+      text: '$typo-body-small',
+      minWidth: '20px',
+      minHeight: '28px',
+      w: 'max-content',
+      maxWidth: '240px',
+    },
+    container: {
+      position: 'absolute',
+      alignContent: 'center',
+      justifyContent: 'center',
+      w: 'fit-content',
+      transition: 'opacity .2s ease-in-out',
+      display: 'inline-flex',
+      zIndex: 1,
+    },
+  },
+} satisfies TooltipConfig;
+
+export const TooltipStyles = {
+  defaultConfig,
+};
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
new file mode 100644
index 00000000..3de59361
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -0,0 +1,196 @@
+import { Tooltip } from './Tooltip';
+import { fireEvent, render } from '../../tests/render';
+
+import { customPropTester } from '@/tests/customPropTester';
+
+const Child = () => <div />;
+
+const getTooltipWrapper = (jsx: JSX.Element) => {
+  const { queryByTestId } = render(jsx);
+  return queryByTestId('tooltip-wrapper');
+};
+
+const getTooltipElement = (jsx: JSX.Element) => {
+  const { queryByTestId } = render(jsx);
+  return {
+    arrow: queryByTestId('tooltip-arrow'),
+    container: queryByTestId('tooltip-container'),
+    content: queryByTestId('tooltip-content'),
+  };
+};
+
+describe('Tooltip', () => {
+  customPropTester(
+    <Tooltip text="">
+      <Child />
+    </Tooltip>,
+    {
+      containerId: 'tooltip-wrapper',
+      props: {
+        arrowheadPosition: ['start', 'middle', 'end'],
+        tooltipPosition: ['top', 'bottom', 'left', 'right'],
+      },
+    },
+  );
+
+  it('should render the tooltip wrapper', () => {
+    const wrapper = getTooltipWrapper(<Tooltip text="" />);
+
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  it("shouldn't render tooltip element (container, arrow, content)", () => {
+    const TooltipComponent = () => <Tooltip text="" />;
+    const wrapper = getTooltipWrapper(<TooltipComponent />);
+
+    const { container, content, arrow } = getTooltipElement(
+      <TooltipComponent />,
+    );
+
+    expect(wrapper).toBeInTheDocument();
+    expect(container).toBeNull();
+    expect(arrow).toBeNull();
+    expect(content).toBeNull();
+  });
+
+  it('should render the tooltip element (container, arrow, content)', () => {
+    const TooltipComponent = () => (
+      <Tooltip text="">
+        <Child />
+      </Tooltip>
+    );
+    const wrapper = getTooltipWrapper(<TooltipComponent />);
+
+    if (wrapper) {
+      fireEvent.mouseEnter(wrapper);
+    }
+
+    const { container } = getTooltipElement(<TooltipComponent />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should render the tooltip arrow', () => {
+    const TooltipComponent = () => (
+      <Tooltip text="">
+        <Child />
+      </Tooltip>
+    );
+    const wrapper = getTooltipWrapper(<TooltipComponent />);
+
+    if (wrapper) {
+      fireEvent.mouseEnter(wrapper);
+    }
+
+    const { arrow } = getTooltipElement(<TooltipComponent />);
+    expect(arrow).toBeInTheDocument();
+  });
+
+  it('should render correct text', () => {
+    const TooltipComponent = () => (
+      <Tooltip text="Hello there">
+        <Child />
+      </Tooltip>
+    );
+    const wrapper = getTooltipWrapper(<TooltipComponent />);
+
+    if (wrapper) {
+      fireEvent.mouseEnter(wrapper);
+    }
+
+    const { content } = getTooltipElement(<TooltipComponent />);
+    expect(content).toHaveTextContent('Hello there');
+  });
+
+  it('should render correct background color (tooltip-element)', () => {
+    const TooltipComponent = () => (
+      <Tooltip text="">
+        <Child />
+      </Tooltip>
+    );
+    const wrapper = getTooltipWrapper(<TooltipComponent />);
+
+    if (wrapper) {
+      fireEvent.mouseEnter(wrapper);
+    }
+
+    const { content } = getTooltipElement(<TooltipComponent />);
+
+    expect(content).toHaveStyle('background-color: rgb(39,46,53);');
+  });
+
+  it('should align text properly (tooltipPosition = top)', () => {
+    const TooltipComponent = () => (
+      <Tooltip text="">
+        <Child />
+      </Tooltip>
+    );
+    const wrapper = getTooltipWrapper(<TooltipComponent />);
+
+    if (wrapper) {
+      fireEvent.mouseEnter(wrapper);
+    }
+
+    const { content } = getTooltipElement(<TooltipComponent />);
+    expect(content).toHaveStyle('text-align: center');
+  });
+
+  it('should render tooltip element (on focus)', () => {
+    const TooltipComponent = () => (
+      <Tooltip text="">
+        <Child />
+      </Tooltip>
+    );
+    const wrapper = getTooltipWrapper(<TooltipComponent />);
+
+    if (wrapper) {
+      fireEvent.focus(wrapper);
+    }
+
+    const { container } = getTooltipElement(<TooltipComponent />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("shouldn't render tooltip element (container, arrow, content)", () => {
+    const TooltipComponent = () => (
+      <Tooltip text="">
+        <Child />
+      </Tooltip>
+    );
+    const wrapper = getTooltipWrapper(<TooltipComponent />);
+
+    if (wrapper) {
+      fireEvent.mouseEnter(wrapper);
+      fireEvent.mouseLeave(wrapper);
+    }
+    const { arrow, content, container } = getTooltipElement(
+      <TooltipComponent />,
+    );
+
+    expect(wrapper).toBeInTheDocument();
+    expect(container).toBeNull();
+    expect(arrow).toBeNull();
+    expect(content).toBeNull();
+  });
+
+  it("shouldn't render tooltip element (container, arrow, content)", () => {
+    const TooltipComponent = () => (
+      <Tooltip text="">
+        <Child />
+      </Tooltip>
+    );
+    const wrapper = getTooltipWrapper(<TooltipComponent />);
+
+    if (wrapper) {
+      fireEvent.focus(wrapper);
+      fireEvent.blur(wrapper);
+    }
+    const { arrow, content, container } = getTooltipElement(
+      <TooltipComponent />,
+    );
+
+    expect(wrapper).toBeInTheDocument();
+    expect(container).toBeNull();
+    expect(arrow).toBeNull();
+    expect(content).toBeNull();
+  });
+});
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
new file mode 100644
index 00000000..19ff804c
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -0,0 +1,105 @@
+import {
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import { stylesBuilder } from './stylesBuilder';
+import { TooltipProps } from './Tooltip.props';
+import { TooltipElement } from './TooltipElement';
+import { calculatePosition } from './utils';
+
+import { tet } from '@/tetrisly';
+
+export const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
+  children,
+  custom,
+  text,
+  tooltipPosition = 'top',
+  arrowheadPosition = 'middle',
+  ...restProps
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const targetRef = useRef<HTMLDivElement>(null);
+  const tooltipElementRef = useRef<HTMLDivElement>(null);
+
+  const styles = useMemo(
+    () => stylesBuilder(tooltipPosition, arrowheadPosition, custom),
+    [arrowheadPosition, tooltipPosition, custom],
+  );
+
+  const updatePosition = useCallback(() => {
+    if (!targetRef.current || !tooltipElementRef.current) {
+      return;
+    }
+    const targetRect = targetRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipElementRef.current.getBoundingClientRect();
+    const calculatedPosition = calculatePosition(
+      targetRect,
+      tooltipRect,
+      tooltipPosition,
+      arrowheadPosition,
+    );
+    setPosition(calculatedPosition);
+  }, [arrowheadPosition, tooltipPosition]);
+
+  useEffect(() => {
+    if (visible) {
+      updatePosition();
+      window.addEventListener('resize', updatePosition);
+      window.addEventListener('scroll', updatePosition, true);
+    } else {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    }
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [visible, updatePosition]);
+
+  const showTooltip = () => {
+    setVisible(true);
+    updatePosition();
+  };
+
+  const hideTooltip = () => {
+    setVisible(false);
+  };
+
+  return (
+    <tet.div
+      {...styles.wrapper}
+      data-testid="tooltip-wrapper"
+      ref={targetRef}
+      onMouseEnter={showTooltip}
+      onMouseLeave={hideTooltip}
+      onFocus={showTooltip}
+      onBlur={hideTooltip}
+      {...restProps}
+    >
+      {children && <tet.div cursor="pointer">{children}</tet.div>}
+      {visible &&
+        createPortal(
+          <TooltipElement
+            ref={tooltipElementRef}
+            text={text}
+            arrowheadPosition={arrowheadPosition}
+            tooltipPosition={tooltipPosition}
+            position={position}
+            custom={custom}
+            {...restProps}
+          />,
+          document.body,
+        )}
+    </tet.div>
+  );
+};
+
+export default Tooltip;
diff --git a/src/components/Tooltip/TooltipElement.tsx b/src/components/Tooltip/TooltipElement.tsx
new file mode 100644
index 00000000..3c51a30c
--- /dev/null
+++ b/src/components/Tooltip/TooltipElement.tsx
@@ -0,0 +1,68 @@
+import { forwardRef, useMemo } from 'react';
+
+import { Arrow } from './Arrow';
+import { stylesBuilder } from './stylesBuilder';
+import { TooltipProps } from './Tooltip.props';
+import { useOpacity } from './useOpacity';
+import {
+  shouldRenderTooltipElementAfterIcon as shouldRenderArrowAfterContent,
+  shouldRenderTooltipElementBeforeIcon as shouldRenderArrowBeforeContent,
+} from './utils';
+
+import { tet } from '@/tetrisly';
+
+type TooltipElementProps = TooltipProps & {
+  position?: { left: number; top: number };
+};
+
+export const TooltipElement = forwardRef<HTMLDivElement, TooltipElementProps>(
+  (
+    {
+      arrowheadPosition = 'middle',
+      tooltipPosition = 'top',
+      text,
+      custom,
+      position = { left: 0, top: 0 },
+      ...restProps
+    },
+    tooltipElementRef,
+  ) => {
+    const renderArrowBeforeContent =
+      shouldRenderArrowBeforeContent(tooltipPosition);
+    const renderArrowAfterContent =
+      shouldRenderArrowAfterContent(tooltipPosition);
+
+    const { opacity } = useOpacity();
+    const styles = useMemo(
+      () => stylesBuilder(tooltipPosition, arrowheadPosition, custom),
+      [arrowheadPosition, tooltipPosition, custom],
+    );
+
+    return (
+      <tet.div
+        ref={tooltipElementRef}
+        {...styles.container}
+        data-testid="tooltip-container"
+        {...restProps}
+        top={position.top}
+        left={position.left}
+        opacity={opacity}
+      >
+        {renderArrowBeforeContent && (
+          <tet.div {...styles.arrow} data-testid="tooltip-arrow">
+            <Arrow arrowType={tooltipPosition} />
+          </tet.div>
+        )}
+        <tet.div {...styles.content} data-testid="tooltip-content">
+          {text}
+        </tet.div>
+
+        {renderArrowAfterContent && (
+          <tet.div {...styles.arrow} data-testid="tooltip-arrow">
+            <Arrow arrowType={tooltipPosition} />
+          </tet.div>
+        )}
+      </tet.div>
+    );
+  },
+);
diff --git a/src/components/Tooltip/index.ts b/src/components/Tooltip/index.ts
new file mode 100644
index 00000000..b48346ff
--- /dev/null
+++ b/src/components/Tooltip/index.ts
@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip.props';
diff --git a/src/components/Tooltip/stylesBuilder.ts b/src/components/Tooltip/stylesBuilder.ts
new file mode 100644
index 00000000..a5ce4df2
--- /dev/null
+++ b/src/components/Tooltip/stylesBuilder.ts
@@ -0,0 +1,58 @@
+import type {
+  ArrowheadPositionType,
+  TooltipPositionType,
+  TooltipProps,
+} from './Tooltip.props';
+import { defaultConfig } from './Tooltip.styles';
+import { alignItemsBasedOnArrowheadPosition, getTextAlign } from './utils';
+
+import { mergeConfigWithCustom } from '@/services';
+import { BaseProps } from '@/types/BaseProps';
+
+type TooltipStyleBuilder = {
+  container: BaseProps;
+  arrow: BaseProps;
+  content: BaseProps;
+  wrapper: BaseProps;
+};
+
+export const stylesBuilder = (
+  tooltipPosition: TooltipPositionType,
+  arrowheadPosition: ArrowheadPositionType,
+  custom?: TooltipProps['custom'],
+): TooltipStyleBuilder => {
+  const { innerElements, ...wrapper } = mergeConfigWithCustom({
+    defaultConfig,
+    custom,
+  });
+  const textAlign = getTextAlign(tooltipPosition);
+  const flexDirection =
+    tooltipPosition === 'left' || tooltipPosition === 'right'
+      ? 'row'
+      : 'column';
+  const alignItems =
+    tooltipPosition === 'left' || tooltipPosition === 'right'
+      ? 'center'
+      : alignItemsBasedOnArrowheadPosition(arrowheadPosition);
+
+  const { arrow, content, container } = innerElements;
+  const arrowStyles = arrow[tooltipPosition];
+  const contentStyles: BaseProps = { ...content, textAlign };
+  const wrapperStyles: BaseProps = {
+    ...wrapper,
+    flexDirection,
+    alignItems,
+  };
+  const containerStyles: BaseProps = {
+    ...container,
+    flexDirection,
+    alignItems,
+  };
+
+  return {
+    container: containerStyles,
+    wrapper: wrapperStyles,
+    arrow: arrowStyles,
+    content: contentStyles,
+  };
+};
diff --git a/src/components/Tooltip/useOpacity.ts b/src/components/Tooltip/useOpacity.ts
new file mode 100644
index 00000000..e42acf9b
--- /dev/null
+++ b/src/components/Tooltip/useOpacity.ts
@@ -0,0 +1,11 @@
+import { useState, useEffect } from 'react';
+
+export const useOpacity = () => {
+  const [opacity, setOpacity] = useState(0);
+
+  useEffect(() => {
+    setOpacity(1);
+  }, []);
+
+  return { opacity };
+};
diff --git a/src/components/Tooltip/utils.ts b/src/components/Tooltip/utils.ts
new file mode 100644
index 00000000..8e89c1f7
--- /dev/null
+++ b/src/components/Tooltip/utils.ts
@@ -0,0 +1,117 @@
+import type {
+  ArrowheadPositionType,
+  TooltipPositionType,
+} from './Tooltip.props';
+
+export const getTextAlign = (position?: TooltipPositionType) => {
+  if (position === 'bottom' || position === 'top') {
+    return 'center';
+  }
+  return position;
+};
+
+export const alignItemsBasedOnArrowheadPosition = (
+  arrowheadPosition: ArrowheadPositionType,
+) => {
+  switch (arrowheadPosition) {
+    case 'end':
+      return 'flex-end';
+    case 'start':
+      return 'flex-start';
+    case 'middle':
+      return 'center';
+    default:
+      return 'flex-start';
+  }
+};
+
+export const shouldRenderTooltipElementAfterIcon = (
+  tooltipPosition: TooltipPositionType,
+) => tooltipPosition === 'left' || tooltipPosition === 'top';
+export const shouldRenderTooltipElementBeforeIcon = (
+  tooltipPosition: TooltipPositionType,
+) => tooltipPosition === 'right' || tooltipPosition === 'bottom';
+
+export const calculatePosition = (
+  targetRect: DOMRect,
+  tooltipRect: DOMRect,
+  tooltipPosition: string,
+  arrowheadPosition: string,
+) => {
+  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+  let top: number;
+  let left: number;
+
+  switch (tooltipPosition) {
+    case 'top':
+      top = targetRect.top + scrollTop - tooltipRect.height;
+      left =
+        getHorizontalPosition(targetRect, tooltipRect, arrowheadPosition) +
+        scrollLeft;
+      break;
+    case 'bottom':
+      top = targetRect.bottom + scrollTop;
+      left =
+        getHorizontalPosition(targetRect, tooltipRect, arrowheadPosition) +
+        scrollLeft;
+      break;
+
+    case 'left':
+      top = getVerticalPosition(targetRect, tooltipRect) + scrollTop;
+      left = targetRect.left + scrollLeft - tooltipRect.width;
+      break;
+    case 'right':
+      top = getVerticalPosition(targetRect, tooltipRect) + scrollTop;
+      left = targetRect.right + scrollLeft;
+      break;
+    default:
+      top = targetRect.top + scrollTop - tooltipRect.height;
+      left =
+        getHorizontalPosition(targetRect, tooltipRect, arrowheadPosition) +
+        scrollLeft;
+      break;
+  }
+
+  top = Math.max(
+    0,
+    Math.min(top, window.innerHeight - tooltipRect.height + scrollTop),
+  );
+  left = Math.max(
+    0,
+    Math.min(left, window.innerWidth - tooltipRect.width + scrollLeft),
+  );
+
+  return { top, left };
+};
+
+const getHorizontalPosition = (
+  targetRect: DOMRect,
+  tooltipRect: DOMRect,
+  arrowheadPosition: string,
+): number => {
+  switch (arrowheadPosition) {
+    case 'start':
+      return targetRect.left;
+    case 'end':
+      return targetRect.left + targetRect.width - tooltipRect.width;
+    default:
+      return targetRect.left + targetRect.width / 2 - tooltipRect.width / 2;
+  }
+};
+
+const getVerticalPosition = (
+  targetRect: DOMRect,
+  tooltipRect: DOMRect,
+  arrowheadPosition?: string,
+): number => {
+  switch (arrowheadPosition) {
+    case 'start':
+      return targetRect.top;
+    case 'end':
+      return targetRect.top + targetRect.height - tooltipRect.height;
+    default:
+      return targetRect.top + targetRect.height / 2 - tooltipRect.height / 2;
+  }
+};
diff --git a/src/docs-components/TooltipDocs.tsx b/src/docs-components/TooltipDocs.tsx
new file mode 100644
index 00000000..4b8d1fe5
--- /dev/null
+++ b/src/docs-components/TooltipDocs.tsx
@@ -0,0 +1,74 @@
+import { capitalize } from 'lodash';
+import type { FC } from 'react';
+
+import { State } from './common/States';
+
+import { TooltipElement } from '@/components/Tooltip/TooltipElement';
+import { SectionHeader } from '@/docs-components/common/SectionHeader.tsx';
+import { tet } from '@/tetrisly';
+
+const labels = [
+  'Arrowhead Position: Start',
+  'Arrowhead Position: Middle',
+  'Arrowhead Position: End',
+] as const;
+const arrowheadPositions = ['start', 'middle', 'end'] as const;
+const tooltipPositions = ['bottom', 'top', 'right', 'left'] as const;
+
+export const TooltipDocs: FC = () => (
+  <>
+    {arrowheadPositions.map((arrowheadPosition, i) => (
+      <tet.section
+        key={arrowheadPosition}
+        display="flex"
+        padding="40px 0px"
+        flexDirection="column"
+      >
+        <SectionHeader px="$dimension-1000" variant="H1" my="auto">
+          {labels[i]}
+        </SectionHeader>
+        <tet.div
+          px="$dimension-1000"
+          borderBottomWidth="1px"
+          borderBottomColor="$color-border-neutral-subtle"
+        >
+          <tet.div
+            py="$dimension-600"
+            display="flex"
+            flexWrap="nowrap"
+            flexDirection="row"
+            gap="$dimension-500"
+            overflowX="scroll"
+          >
+            {tooltipPositions.map((tooltipPosition, j) => (
+              <tet.div
+                key={tooltipPosition}
+                display="flex"
+                flexDirection="column"
+                gap="$dimension-400"
+                flexBasis="100"
+                flexShrink="0"
+                flexGrow="1"
+              >
+                <State
+                  key={tooltipPositions[j]}
+                  state={capitalize(tooltipPositions[j])}
+                />
+                <tet.div
+                  py="$space-component-padding-4xLarge"
+                  position="relative"
+                >
+                  <TooltipElement
+                    arrowheadPosition={arrowheadPosition}
+                    tooltipPosition={tooltipPosition}
+                    text="Tooltip Placeholder"
+                  />
+                </tet.div>
+              </tet.div>
+            ))}
+          </tet.div>
+        </tet.div>
+      </tet.section>
+    ))}
+  </>
+);
diff --git a/src/index.ts b/src/index.ts
index fcc44c65..b5a5da00 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -31,5 +31,6 @@ export * from './components/Tag';
 export * from './components/TagInput';
 export * from './components/TextInput';
 export * from './components/Toast';
+export * from './components/Tooltip';
 export * from './tetrisly';
 export * from './theme';