added tooltip to the leftsidebar icons (#5215)

frontend/src/Editor/Header/GlobalSettings.jsx

@@ -239,6 +239,7 @@ export const GlobalSettings = ({
           selectedSidebarItem={show}
           icon="settings"
           className={cx(`cursor-pointer sidebar-global-settings`)}
+          tip="Settings"
         />
       </OverlayTrigger>
     </>

frontend/src/Editor/LeftSidebar/SidebarComment.jsx

@@ -34,6 +34,7 @@ export const LeftSidebarComment = ({ toggleComments, selectedSidebarItem, appVer
         toggleActive(!isActive);
         toggleComments();
       }}
+      tip="Comments"
     />
   );
 };

frontend/src/Editor/LeftSidebar/SidebarDatasources.jsx

@@ -130,6 +130,7 @@ export const LeftSidebarDataSources = ({
           onClick={() => setSelectedSidebarItem('database')}
           icon="database"
           className={`left-sidebar-item sidebar-datasources left-sidebar-layout`}
+          tip="Sources"
         />
       </Popover>
 

frontend/src/Editor/LeftSidebar/SidebarDebugger.jsx

@@ -142,6 +142,7 @@ export const LeftSidebarDebugger = ({
         className={`left-sidebar-item  left-sidebar-layout`}
         badge={true}
         count={unReadErrorCount.unread}
+        tip="Debugger"
       />
     </Popover>
   );

frontend/src/Editor/LeftSidebar/SidebarInspector.jsx

@@ -213,6 +213,7 @@ export const LeftSidebarInspector = ({
         onClick={() => setSelectedSidebarItem('inspect')}
         icon="inspect"
         className={`left-sidebar-item left-sidebar-layout left-sidebar-inspector`}
+        tip="Inspector"
       />
     </Popover>
   );

frontend/src/Editor/LeftSidebar/SidebarItem.jsx

@@ -43,8 +43,8 @@ export const LeftSidebarItem = ({
     <OverlayTrigger
       trigger={['click', 'hover', 'focus']}
       placement="right"
-      delay={{ show: 1600, hide: 100 }}
-      overlay={<Tooltip id="button-tooltip">{t(`leftSidebar.${text}.tip`, tip)}</Tooltip>}
+      delay={{ show: 250, hide: 200 }}
+      overlay={<Tooltip id="button-tooltip">{t(`leftSidebar.${tip}.tip`, tip)}</Tooltip>}
     >
       {content}
     </OverlayTrigger>

frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx

@@ -186,6 +186,7 @@ const LeftSidebarPageSelector = ({
         onClick={() => setSelectedSidebarItem('page')}
         icon="page"
         className={`left-sidebar-item left-sidebar-layout left-sidebar-page-selector`}
+        tip="Pages"
       />
     </Popover>
   );