diff --git a/ui/src/app/sidebar/sidebar.scss b/ui/src/app/sidebar/sidebar.scss
index 20ab71b969294..d41cbeed3f7cf 100644
--- a/ui/src/app/sidebar/sidebar.scss
+++ b/ui/src/app/sidebar/sidebar.scss
@@ -58,6 +58,13 @@ $deselected-text: #818d94;
         text-overflow: ellipsis;
     }
 
+    &__tooltip {
+        max-width: 300px;
+        @media screen and (max-width: 590px) {
+            max-width: 250px;
+        }
+    }
+
     &__nav-item {
         cursor: pointer;
         display: flex;
diff --git a/ui/src/app/sidebar/sidebar.tsx b/ui/src/app/sidebar/sidebar.tsx
index c690565d01cb5..1aeb77c9112ee 100644
--- a/ui/src/app/sidebar/sidebar.tsx
+++ b/ui/src/app/sidebar/sidebar.tsx
@@ -64,7 +64,7 @@ export const Sidebar = (props: SidebarProps) => {
                 </div>
 
                 {(props.navItems || []).map(item => (
-                    <Tooltip key={item.path} content={item?.tooltip || item.title} {...tooltipProps}>
+                    <Tooltip key={item.path} content={<div className='sidebar__tooltip'>{item?.tooltip || item.title}</div>} {...tooltipProps}>
                         <div
                             key={item.title}
                             className={`sidebar__nav-item ${locationPath === item.path || locationPath.startsWith(`${item.path}/`) ? 'sidebar__nav-item--active' : ''}`}