diff --git a/web/navigation-sidebar/navigation-sidebar-constants.js b/web/navigation-sidebar/navigation-sidebar-constants.js
new file mode 100644
--- /dev/null
+++ b/web/navigation-sidebar/navigation-sidebar-constants.js
@@ -0,0 +1,9 @@
+// @flow
+
+export const navigationSidebarTooltipStyle = {
+  paddingTop: 8,
+  paddingBottom: 8,
+  paddingLeft: 8,
+  paddingRight: 8,
+  height: 17,
+};
diff --git a/web/navigation-sidebar/navigation-sidebar-toolitp.react.js b/web/navigation-sidebar/navigation-sidebar-toolitp.react.js
new file mode 100644
--- /dev/null
+++ b/web/navigation-sidebar/navigation-sidebar-toolitp.react.js
@@ -0,0 +1,25 @@
+// @flow
+
+import * as React from 'react';
+
+import { navigationSidebarTooltipStyle } from './navigation-sidebar-constants.js';
+import css from './navigation-sidebar-tooltip.css';
+
+type Props = {
+  +tooltipLabel: string,
+};
+
+function NavigationSidebarTooltip(props: Props): React.Node {
+  const { tooltipLabel } = props;
+
+  return (
+    <div className={css.container}>
+      <div className={css.arrowLeft} />
+      <div className={css.tooltipLabel} style={navigationSidebarTooltipStyle}>
+        {tooltipLabel}
+      </div>
+    </div>
+  );
+}
+
+export default NavigationSidebarTooltip;
diff --git a/web/navigation-sidebar/navigation-sidebar-tooltip.css b/web/navigation-sidebar/navigation-sidebar-tooltip.css
new file mode 100644
--- /dev/null
+++ b/web/navigation-sidebar/navigation-sidebar-tooltip.css
@@ -0,0 +1,24 @@
+.container {
+  position: relative;
+  margin-left: 24px;
+}
+
+.arrowLeft {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 100%;
+  width: 0;
+  height: 0;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-right: 10px solid var(--tooltip-background-primary-default);
+}
+
+.tooltipLabel {
+  border-radius: 4px;
+  background-color: var(--tooltip-background-primary-default);
+  color: var(--tooltip-label-primary-default);
+  font-size: var(--s-font-14);
+  white-space: nowrap;
+}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -313,6 +313,10 @@
   --enumOption-description-primary-default: var(--shades-white-60);
   --enumOption-input-primary-default: var(--shades-black-60);
   --enumOption-input-primary-selected: var(--shades-white-60);
+
+  /* Tooltip */
+  --tooltip-background-primary-default: var(--shades-black-75);
+  --tooltip-label-primary-default: var(--shades-white-100);
 }
 
 /* Light theme */
@@ -379,4 +383,9 @@
   --enumOption-description-primary-default: var(--shades-black-60);
   --enumOption-input-primary-default: var(--shades-black-50);
   --enumOption-input-primary-selected: var(--shades-black-60);
+
+  /* Tooltip */
+  /* @GINSU: TODO double check these values after redesign is finished */
+  --tooltip-background-primary-default: var(--shades-white-80);
+  --tooltip-label-primary-default: var(--shades-black-85);
 }