diff --git a/web/navigation-sidebar/account-settings-button.react.js b/web/navigation-sidebar/account-settings-button.react.js
--- a/web/navigation-sidebar/account-settings-button.react.js
+++ b/web/navigation-sidebar/account-settings-button.react.js
@@ -6,8 +6,10 @@
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import css from './account-settings-button.css';
+import { navigationSidebarLabelTooltipMargin } from './navigation-sidebar-constants.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js';
+import { tooltipPositions } from '../utils/tooltip-utils.js';
 
 function AccountSettingsButton(): React.Node {
   const dispatch = useDispatch();
@@ -26,6 +28,8 @@
 
   const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
     tooltipLabel: 'Settings',
+    position: tooltipPositions.RIGHT,
+    tooltipMargin: navigationSidebarLabelTooltipMargin,
   });
 
   return (
diff --git a/web/navigation-sidebar/community-creation-button.react.js b/web/navigation-sidebar/community-creation-button.react.js
--- a/web/navigation-sidebar/community-creation-button.react.js
+++ b/web/navigation-sidebar/community-creation-button.react.js
@@ -6,8 +6,10 @@
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 
 import css from './community-creation-button.css';
+import { navigationSidebarLabelTooltipMargin } from './navigation-sidebar-constants.js';
 import CommunityCreationModal from '../sidebar/community-creation/community-creation-modal.react.js';
 import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js';
+import { tooltipPositions } from '../utils/tooltip-utils.js';
 
 function CommunityCreationButton(): React.Node {
   const { pushModal } = useModalContext();
@@ -19,6 +21,8 @@
 
   const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
     tooltipLabel: 'Create community',
+    position: tooltipPositions.RIGHT,
+    tooltipMargin: navigationSidebarLabelTooltipMargin,
   });
 
   return (
diff --git a/web/navigation-sidebar/community-list-item.react.js b/web/navigation-sidebar/community-list-item.react.js
--- a/web/navigation-sidebar/community-list-item.react.js
+++ b/web/navigation-sidebar/community-list-item.react.js
@@ -6,10 +6,12 @@
 import type { ResolvedThreadInfo } from 'lib/types/thread-types.js';
 
 import css from './community-list-item.css';
+import { navigationSidebarLabelTooltipMargin } from './navigation-sidebar-constants.js';
 import ThreadAvatar from '../avatars/thread-avatar.react.js';
 import UnreadBadge from '../components/unread-badge.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js';
+import { tooltipPositions } from '../utils/tooltip-utils.js';
 
 type Props = {
   +threadInfo: ResolvedThreadInfo,
@@ -36,6 +38,8 @@
 
   const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
     tooltipLabel: threadInfo.uiName,
+    position: tooltipPositions.RIGHT,
+    tooltipMargin: navigationSidebarLabelTooltipMargin,
   });
 
   return (
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,8 +1,6 @@
 // @flow
 
-export const navigationSidebarTooltipContainerStyle = {
-  marginLeft: 24,
-};
+export const navigationSidebarLabelTooltipMargin = 24;
 
 export const navigationSidebarTooltipStyle = {
   paddingTop: 8,
diff --git a/web/navigation-sidebar/navigation-sidebar-home-button.react.js b/web/navigation-sidebar/navigation-sidebar-home-button.react.js
--- a/web/navigation-sidebar/navigation-sidebar-home-button.react.js
+++ b/web/navigation-sidebar/navigation-sidebar-home-button.react.js
@@ -5,16 +5,20 @@
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { unreadCount } from 'lib/selectors/thread-selectors.js';
 
+import { navigationSidebarLabelTooltipMargin } from './navigation-sidebar-constants.js';
 import css from './navigation-sidebar-home-button.css';
 import UnreadBadge from '../components/unread-badge.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useNavigationSidebarTooltip } from '../utils/tooltip-action-utils.js';
+import { tooltipPositions } from '../utils/tooltip-utils.js';
 
 function NavigationSidebarHomeButton(): React.Node {
   const unreadCountValue = useSelector(unreadCount);
 
   const { onMouseEnter, onMouseLeave } = useNavigationSidebarTooltip({
     tooltipLabel: 'Home',
+    position: tooltipPositions.RIGHT,
+    tooltipMargin: navigationSidebarLabelTooltipMargin,
   });
 
   const unreadBadge = React.useMemo(() => {
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
@@ -1,26 +1,58 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
 
-import {
-  navigationSidebarTooltipContainerStyle,
-  navigationSidebarTooltipStyle,
-} from './navigation-sidebar-constants.js';
+import { navigationSidebarTooltipStyle } from './navigation-sidebar-constants.js';
 import css from './navigation-sidebar-tooltip.css';
+import {
+  tooltipPositions,
+  type TooltipPosition,
+} from '../utils/tooltip-utils.js';
 
 type Props = {
   +tooltipLabel: string,
+  +position: TooltipPosition,
+  +tooltipMargin: number,
 };
 
 function NavigationSidebarTooltip(props: Props): React.Node {
-  const { tooltipLabel } = props;
+  const { tooltipLabel, position, tooltipMargin } = props;
+
+  const tooltipMarginStyle = React.useMemo(() => {
+    if (position === tooltipPositions.RIGHT) {
+      return {
+        marginLeft: tooltipMargin,
+      };
+    }
+    if (position === tooltipPositions.LEFT) {
+      return {
+        marginRight: tooltipMargin,
+      };
+    }
+    if (position === tooltipPositions.BOTTOM) {
+      return {
+        marginTop: tooltipMargin,
+      };
+    }
+    if (position === tooltipPositions.TOP) {
+      return {
+        marginBottom: tooltipMargin,
+      };
+    }
+    return null;
+  }, [position, tooltipMargin]);
+
+  const arrowClassName = classNames(css.arrow, {
+    [css.arrowLeft]: position === tooltipPositions.RIGHT,
+    [css.arrowRight]: position === tooltipPositions.LEFT,
+    [css.arrowTop]: position === tooltipPositions.BOTTOM,
+    [css.arrowBottom]: position === tooltipPositions.TOP,
+  });
 
   return (
-    <div
-      className={css.container}
-      style={navigationSidebarTooltipContainerStyle}
-    >
-      <div className={css.arrowLeft} />
+    <div className={css.container} style={tooltipMarginStyle}>
+      <div className={arrowClassName} />
       <div className={css.tooltipLabel} style={navigationSidebarTooltipStyle}>
         {tooltipLabel}
       </div>
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
@@ -2,18 +2,48 @@
   position: relative;
 }
 
-.arrowLeft {
+.arrow {
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: 100%;
   width: 0;
   height: 0;
+}
+
+.arrowLeft,
+.arrowRight {
+  top: 50%;
+  transform: translateY(-50%);
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
+}
+
+.arrowTop,
+.arrowBottom {
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+}
+
+.arrowLeft {
+  right: 100%;
   border-right: 10px solid var(--tooltip-background-primary-default);
 }
 
+.arrowRight {
+  left: 100%;
+  border-left: 10px solid var(--tooltip-background-primary-default);
+}
+
+.arrowTop {
+  bottom: 100%;
+  border-bottom: 10px solid var(--tooltip-background-primary-default);
+}
+
+.arrowBottom {
+  top: 100%;
+  border-top: 10px solid var(--tooltip-background-primary-default);
+}
+
 .tooltipLabel {
   border-radius: 4px;
   background-color: var(--tooltip-background-primary-default);
diff --git a/web/utils/tooltip-action-utils.js b/web/utils/tooltip-action-utils.js
--- a/web/utils/tooltip-action-utils.js
+++ b/web/utils/tooltip-action-utils.js
@@ -32,7 +32,6 @@
   type TooltipPositionStyle,
   type TooltipSize,
 } from './tooltip-utils.js';
-import { tooltipPositions } from './tooltip-utils.js';
 import { getComposedMessageID } from '../chat/chat-constants.js';
 import { useEditModalContext } from '../chat/edit-message-provider.js';
 import MessageTooltip from '../chat/message-tooltip.react.js';
@@ -480,32 +479,47 @@
   };
 }
 
-const availableNavigationSidebarTooltipPositions = [tooltipPositions.RIGHT];
-
 type UseNavigationSidebarTooltipArgs = {
   +tooltipLabel: string,
+  +position: TooltipPosition,
+  // The margin size should be between the point of origin and
+  // the base of the tooltip. The arrow is a "decoration" and
+  // should not be considered when measuring the margin size.
+  +tooltipMargin: number,
 };
 
 function useNavigationSidebarTooltip({
   tooltipLabel,
+  position,
+  tooltipMargin,
 }: UseNavigationSidebarTooltipArgs): UseTooltipResult {
   const tooltipSize = React.useMemo(() => {
     if (typeof document === 'undefined') {
       return undefinedTooltipSize;
     }
 
-    return calculateNavigationSidebarTooltipSize(tooltipLabel);
-  }, [tooltipLabel]);
+    return calculateNavigationSidebarTooltipSize(
+      tooltipLabel,
+      position,
+      tooltipMargin,
+    );
+  }, [position, tooltipLabel, tooltipMargin]);
 
   const createNavigationSidebarTooltip = React.useCallback(
-    () => <NavigationSidebarTooltip tooltipLabel={tooltipLabel} />,
-    [tooltipLabel],
+    () => (
+      <NavigationSidebarTooltip
+        tooltipLabel={tooltipLabel}
+        position={position}
+        tooltipMargin={tooltipMargin}
+      />
+    ),
+    [position, tooltipLabel, tooltipMargin],
   );
 
   const { onMouseEnter, onMouseLeave } = useTooltip({
     createTooltip: createNavigationSidebarTooltip,
     tooltipSize,
-    availablePositions: availableNavigationSidebarTooltipPositions,
+    availablePositions: [position],
   });
 
   return {
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,10 +12,7 @@
   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 { navigationSidebarTooltipStyle } from '../navigation-sidebar/navigation-sidebar-constants.js';
 import { calculateMaxTextWidth } from '../utils/text-utils.js';
 
 export const tooltipPositions = Object.freeze({
@@ -413,8 +410,9 @@
 
 function calculateNavigationSidebarTooltipSize(
   tooltipLabel: string,
+  position: TooltipPosition,
+  tooltipMargin: number,
 ): TooltipSize {
-  const { marginLeft } = navigationSidebarTooltipContainerStyle;
   const {
     paddingLeft,
     paddingRight,
@@ -425,8 +423,17 @@
 
   const tooltipLabelTextWidth = calculateMaxTextWidth([tooltipLabel], 14);
 
-  const width = marginLeft + paddingLeft + tooltipLabelTextWidth + paddingRight;
-  const height = paddingTop + contentHeight + paddingBottom;
+  const marginIsHorizontal =
+    position === tooltipPositions.RIGHT || position === tooltipPositions.LEFT;
+  const marginIsVertical =
+    position === tooltipPositions.TOP || position === tooltipPositions.BOTTOM;
+
+  const horizontalMargin = marginIsHorizontal ? tooltipMargin : 0;
+  const verticalMargin = marginIsVertical ? tooltipMargin : 0;
+
+  const width =
+    paddingLeft + tooltipLabelTextWidth + paddingRight + horizontalMargin;
+  const height = paddingTop + contentHeight + paddingBottom + verticalMargin;
 
   return {
     width,