diff --git a/web/navigation-sidebar/navigation-sidebar-constants.js b/web/navigation-sidebar/navigation-sidebar-constants.js
--- a/web/navigation-sidebar/navigation-sidebar-constants.js
+++ b/web/navigation-sidebar/navigation-sidebar-constants.js
@@ -1,5 +1,9 @@
 // @flow
 
+export const navigationSidebarTooltipContainerStyle = {
+  marginLeft: 24,
+};
+
 export const navigationSidebarTooltipStyle = {
   paddingTop: 8,
   paddingBottom: 8,
diff --git a/web/navigation-sidebar/navigation-sidebar-toolitp.react.js b/web/navigation-sidebar/navigation-sidebar-toolitp.react.js
--- a/web/navigation-sidebar/navigation-sidebar-toolitp.react.js
+++ b/web/navigation-sidebar/navigation-sidebar-toolitp.react.js
@@ -2,7 +2,10 @@
 
 import * as React from 'react';
 
-import { navigationSidebarTooltipStyle } from './navigation-sidebar-constants.js';
+import {
+  navigationSidebarTooltipContainerStyle,
+  navigationSidebarTooltipStyle,
+} from './navigation-sidebar-constants.js';
 import css from './navigation-sidebar-tooltip.css';
 
 type Props = {
@@ -13,7 +16,10 @@
   const { tooltipLabel } = props;
 
   return (
-    <div className={css.container}>
+    <div
+      className={css.container}
+      style={navigationSidebarTooltipContainerStyle}
+    >
       <div className={css.arrowLeft} />
       <div className={css.tooltipLabel} style={navigationSidebarTooltipStyle}>
         {tooltipLabel}
diff --git a/web/navigation-sidebar/navigation-sidebar-tooltip.css b/web/navigation-sidebar/navigation-sidebar-tooltip.css
--- a/web/navigation-sidebar/navigation-sidebar-tooltip.css
+++ b/web/navigation-sidebar/navigation-sidebar-tooltip.css
@@ -1,6 +1,5 @@
 .container {
   position: relative;
-  margin-left: 24px;
 }
 
 .arrowLeft {
diff --git a/web/utils/tooltip-utils.js b/web/utils/tooltip-utils.js
--- a/web/utils/tooltip-utils.js
+++ b/web/utils/tooltip-utils.js
@@ -12,6 +12,10 @@
   reactionSeeMoreLabel,
 } from '../chat/chat-constants.js';
 import type { PositionInfo } from '../chat/position-types.js';
+import {
+  navigationSidebarTooltipContainerStyle,
+  navigationSidebarTooltipStyle,
+} from '../navigation-sidebar/navigation-sidebar-constants.js';
 import { calculateMaxTextWidth } from '../utils/text-utils.js';
 
 export const tooltipPositions = Object.freeze({
@@ -407,9 +411,33 @@
   };
 }
 
+function calculateNavigationSidebarTooltipSize(
+  tooltipLabel: string,
+): TooltipSize {
+  const { marginLeft } = navigationSidebarTooltipContainerStyle;
+  const {
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    height: contentHeight,
+  } = navigationSidebarTooltipStyle;
+
+  const tooltipLabelTextWidth = calculateMaxTextWidth([tooltipLabel], 14);
+
+  const width = marginLeft + paddingLeft + tooltipLabelTextWidth + paddingRight;
+  const height = paddingTop + contentHeight + paddingBottom;
+
+  return {
+    width,
+    height,
+  };
+}
+
 export {
   findTooltipPosition,
   getTooltipPositionStyle,
   calculateMessageTooltipSize,
   calculateReactionTooltipSize,
+  calculateNavigationSidebarTooltipSize,
 };