diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss
index 76206a70e3..428a4bf37f 100644
--- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss
+++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss
@@ -29,6 +29,19 @@
   }
 }
 
+.tooltipContent {
+  font-family: PoppinsSans, sans-serif;
+  font-size: $moderate-xsmall;
+  font-weight: normal;
+  color: var(--breadcrumbs-color);
+}
+
+.li {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 @include tablet {
   .li {
     &:first-child {
diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx
index 2839262254..7b84a29081 100644
--- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx
+++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx
@@ -1,7 +1,13 @@
-import React, { FC, useRef } from "react";
+import React, { FC, useRef, useMemo } from "react";
 import { useHistory } from "react-router";
+import { useMeasure } from "react-use";
 import { useRoutesContext } from "@/shared/contexts";
-import { ContextMenuRef } from "@/shared/ui-kit";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  ContextMenuRef,
+} from "@/shared/ui-kit";
 import { ProjectsStateItem } from "@/store/states";
 import { truncateBreadcrumbName } from "../../utils";
 import { BreadcrumbsMenu } from "../BreadcrumbsMenu";
@@ -18,6 +24,9 @@ export interface BreadcrumbsItemProps {
   onClick?: () => void;
 }
 
+const PADDING = 24;
+const OVERLAY_THRESHOLD = 5;
+
 const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
   const {
     activeItem,
@@ -30,8 +39,18 @@ const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
     onClick,
   } = props;
   const history = useHistory();
+  const [containerRef, { width: containerWidth }] = useMeasure<HTMLLIElement>();
+  const [buttonRef, { width: buttonWidth }] = useMeasure<HTMLButtonElement>();
+
+  const hasOverlay = useMemo(() => {
+    return (
+      Math.abs(
+        Math.floor(containerWidth) - Math.floor(buttonWidth + PADDING),
+      ) >= OVERLAY_THRESHOLD
+    );
+  }, [containerWidth, buttonWidth]);
+
   const { getCommonPagePath } = useRoutesContext();
-  const containerRef = useRef<HTMLLIElement>(null);
   const contextMenuRef = useRef<ContextMenuRef>(null);
 
   const handleButtonClick = () => {
@@ -40,17 +59,26 @@ const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
       onClick?.();
       return;
     }
-    if (containerRef.current) {
-      const { x, y, height } = containerRef.current.getBoundingClientRect();
-      contextMenuRef.current?.open(x, y + height);
-    }
   };
 
   return (
     <li ref={containerRef} className={styles.li}>
-      <button className={styles.button} onClick={handleButtonClick}>
-        {truncate ? truncateBreadcrumbName(activeItem.name) : activeItem.name}
-      </button>
+      <Tooltip placement="bottom-start">
+        <TooltipTrigger asChild>
+          <button
+            ref={buttonRef}
+            className={styles.button}
+            onClick={handleButtonClick}
+          >
+            {truncate
+              ? truncateBreadcrumbName(activeItem.name)
+              : activeItem.name}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent withOverlay={hasOverlay}>
+          <span className={styles.tooltipContent}>{activeItem.name}</span>
+        </TooltipContent>
+      </Tooltip>
       {withMenu && (
         <BreadcrumbsMenu
           ref={contextMenuRef}
diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx
index eec107a6e0..1bc6ee1895 100644
--- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx
+++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from "react";
+import React, { FC, useEffect, useMemo, useCallback } from "react";
 import { useDispatch } from "react-redux";
 import { CommonEvent, CommonEventEmitter } from "@/events";
 import { CommonService } from "@/services";
@@ -19,22 +19,33 @@ interface FeedItemBreadcrumbsProps {
   truncate: boolean;
 }
 
-const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (props) => {
-  const { breadcrumbs, itemsWithMenus, truncate } = props;
+const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = ({
+  breadcrumbs,
+  itemsWithMenus,
+  truncate,
+}) => {
   const dispatch = useDispatch();
   const goToCreateCommon = useGoToCreateCommon();
   const isMobileView = useIsTabletView();
-  const breadcrumbsItems = truncate
-    ? [breadcrumbs.items[0], breadcrumbs.items[breadcrumbs.items.length - 1]]
-    : breadcrumbs.items;
 
-  const handleItemClick = (item: ProjectsStateItem) => {
-    if (item.rootCommonId) {
-      dispatch(
-        commonLayoutActions.resetCurrentCommonIdAndProjects(item.rootCommonId),
-      );
-    }
-  };
+  const breadcrumbsItems = useMemo(() => {
+    return truncate
+      ? [breadcrumbs.items[0], breadcrumbs.items[breadcrumbs.items.length - 1]]
+      : breadcrumbs.items;
+  }, [breadcrumbs.items, truncate]);
+
+  const handleItemClick = useCallback(
+    (item: ProjectsStateItem) => {
+      if (item.rootCommonId) {
+        dispatch(
+          commonLayoutActions.resetCurrentCommonIdAndProjects(
+            item.rootCommonId,
+          ),
+        );
+      }
+    },
+    [dispatch],
+  );
 
   useEffect(() => {
     const commonIds = breadcrumbs.items.map((item) => item.commonId);
@@ -55,7 +66,9 @@ const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (props) => {
       });
     });
 
-    return unsubscribe;
+    return () => {
+      unsubscribe();
+    };
   }, [breadcrumbs.activeItem?.id]);
 
   return (
diff --git a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/FeedBreadcrumbsItem/FeedBreadcrumbsItem.tsx b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/FeedBreadcrumbsItem/FeedBreadcrumbsItem.tsx
index 6daa302210..95b0055525 100644
--- a/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/FeedBreadcrumbsItem/FeedBreadcrumbsItem.tsx
+++ b/src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/components/FeedBreadcrumbsItem/FeedBreadcrumbsItem.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from "react";
+import React, { FC, useMemo, useCallback } from "react";
 import { useSelector } from "react-redux";
 import {
   ProjectsStateItem,
@@ -21,49 +21,49 @@ const getItemsByParentId = (
 ): ProjectsStateItem[] =>
   data.filter((item) => item.directParent?.commonId === parentId);
 
-const FeedBreadcrumbsItem: FC<FeedBreadcrumbsItemProps> = (props) => {
-  const { activeItem, ...restProps } = props;
+const FeedBreadcrumbsItem: FC<FeedBreadcrumbsItemProps> = ({
+  activeItem,
+  ...restProps
+}) => {
   const { commons, areCommonsFetched } = useSelector(
     selectCommonLayoutCommonsState,
   );
   const { projects, areProjectsFetched } = useSelector(
     selectCommonLayoutProjectsState,
   );
+
   const parentCommonId = activeItem.directParent?.commonId;
-  const baseItems = useMemo(
-    () =>
-      parentCommonId ? getItemsByParentId(parentCommonId, projects) : commons,
-    [parentCommonId, projects, commons],
-  );
+
+  const baseItems = useMemo(() => {
+    return parentCommonId
+      ? getItemsByParentId(parentCommonId, projects)
+      : commons;
+  }, [parentCommonId, projects, commons]);
+
   const areItemsLoading = parentCommonId
     ? !areProjectsFetched
     : !areCommonsFetched;
-  const hasParentPermissionToAddProject = useMemo(
-    () =>
-      (parentCommonId &&
-        (
-          commons.find((item) => item.commonId === parentCommonId) ||
-          projects.find((item) => item.commonId === parentCommonId)
-        )?.hasPermissionToAddProject) ??
-      false,
-    [commons, projects, parentCommonId],
-  );
-  const items = useMemo(
-    () =>
-      baseItems.length === 0
-        ? [activeItem]
-        : [...baseItems].sort((prevItem, nextItem) => {
-            if (prevItem.commonId === activeItem.commonId) {
-              return -1;
-            }
-            if (nextItem.commonId === activeItem.commonId) {
-              return 1;
-            }
 
-            return 0;
-          }),
-    [baseItems, activeItem],
-  );
+  const hasParentPermissionToAddProject = useMemo(() => {
+    if (!parentCommonId) return false;
+
+    const parentItem =
+      commons.find((item) => item.commonId === parentCommonId) ||
+      projects.find((item) => item.commonId === parentCommonId);
+
+    return parentItem?.hasPermissionToAddProject ?? false;
+  }, [commons, projects, parentCommonId]);
+
+  const items = useMemo(() => {
+    if (baseItems.length === 0) {
+      return [activeItem];
+    }
+    return [...baseItems].sort((prevItem, nextItem) => {
+      if (prevItem.commonId === activeItem.commonId) return -1;
+      if (nextItem.commonId === activeItem.commonId) return 1;
+      return 0;
+    });
+  }, [baseItems, activeItem]);
 
   return (
     <BreadcrumbsItem
diff --git a/src/shared/ui-kit/Tooltip/components/TooltipContent/TooltipContent.module.scss b/src/shared/ui-kit/Tooltip/components/TooltipContent/TooltipContent.module.scss
index 5c9d4d6a9f..72b6c35ffd 100644
--- a/src/shared/ui-kit/Tooltip/components/TooltipContent/TooltipContent.module.scss
+++ b/src/shared/ui-kit/Tooltip/components/TooltipContent/TooltipContent.module.scss
@@ -20,3 +20,8 @@
   display: flex;
   color: var(--secondary-background);
 }
+
+.overlay {
+  z-index: 10000;
+  user-select: none;
+}
diff --git a/src/shared/ui-kit/Tooltip/components/TooltipContent/TooltipContent.tsx b/src/shared/ui-kit/Tooltip/components/TooltipContent/TooltipContent.tsx
index 5df7f08bbd..c72448096e 100644
--- a/src/shared/ui-kit/Tooltip/components/TooltipContent/TooltipContent.tsx
+++ b/src/shared/ui-kit/Tooltip/components/TooltipContent/TooltipContent.tsx
@@ -7,15 +7,20 @@ import React, {
 } from "react";
 import { mergeRefs } from "react-merge-refs";
 import classNames from "classnames";
-import { FloatingPortal } from "@floating-ui/react-dom-interactions";
+import { FloatingPortal, FloatingOverlay } from "@floating-ui/react";
 import { CaretIcon } from "@/shared/icons";
 import { useTooltipContext } from "../../context";
 import styles from "./TooltipContent.module.scss";
 
+interface TooltipContentProps extends HTMLProps<HTMLDivElement> {
+  withOverlay?: boolean;
+}
+
 const TooltipContent: ForwardRefRenderFunction<
   HTMLDivElement,
-  HTMLProps<HTMLDivElement>
+  TooltipContentProps
 > = (props, propRef) => {
+  const { withOverlay } = props;
   const state = useTooltipContext();
   const { children, ...containerProps } = state.getFloatingProps(props);
   const [side] = state.placement.split("-");
@@ -44,35 +49,64 @@ const TooltipContent: ForwardRefRenderFunction<
     [state.floating, propRef],
   );
 
+  const divProps = useMemo(
+    () => ({
+      ref,
+      style: {
+        position: state.strategy,
+        top: state.y ?? 0,
+        left: state.x ?? 0,
+        visibility: state.x === null ? "hidden" : "visible",
+        ...props.style,
+      } as CSSProperties,
+      ...containerProps,
+      className: containerClassName,
+    }),
+    [
+      state.strategy,
+      state.x,
+      state.y,
+      props.style,
+      containerProps,
+      containerClassName,
+    ],
+  );
+
   return (
     <FloatingPortal>
       {state.open && (
-        <div
-          ref={ref}
-          style={{
-            position: state.strategy,
-            top: state.y ?? 0,
-            left: state.x ?? 0,
-            visibility: state.x === null ? "hidden" : "visible",
-            ...props.style,
-          }}
-          {...containerProps}
-          className={containerClassName}
-        >
-          {children}
-          <div
-            ref={state.arrowRef}
-            className={styles.arrowWrapper}
-            style={arrowStyles}
-          >
-            <CaretIcon />
-          </div>
-        </div>
+        <>
+          {withOverlay ? (
+            <FloatingOverlay className={styles.overlay}>
+              <div {...divProps}>
+                {children}
+                <div
+                  ref={state.arrowRef}
+                  className={styles.arrowWrapper}
+                  style={arrowStyles}
+                >
+                  <CaretIcon />
+                </div>
+              </div>
+            </FloatingOverlay>
+          ) : (
+            <div {...divProps}>
+              {children}
+              <div
+                ref={state.arrowRef}
+                className={styles.arrowWrapper}
+                style={arrowStyles}
+              >
+                <CaretIcon />
+              </div>
+            </div>
+          )}
+        </>
       )}
     </FloatingPortal>
   );
 };
 
-export default forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
+export default forwardRef<HTMLDivElement, TooltipContentProps>(
   TooltipContent,
 );