🚸(frontend) delay tooltip appearance in lateral menu

Improve UX by adding a delay before showing tooltips in the lateral menu.
Users often hover from bottom to top, causing tooltips to overlap other
options too quickly.

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx

@@ -14,13 +14,16 @@ import { useTranslation } from 'react-i18next'
 
 const CONTROL_BAR_BREAKPOINT = 1100
 
-const NavigationControls = ({ onPress }: Partial<ToggleButtonProps>) => (
+const NavigationControls = ({
+  onPress,
+  tooltipType = 'instant',
+}: Partial<ToggleButtonProps>) => (
   <>
-    <ChatToggle onPress={onPress} />
+    <ChatToggle onPress={onPress} tooltipType={tooltipType} />
-    <ParticipantsToggle onPress={onPress} />
+    <ParticipantsToggle onPress={onPress} tooltipType={tooltipType} />
-    <TranscriptToggle onPress={onPress} />
+    <TranscriptToggle onPress={onPress} tooltipType={tooltipType} />
-    <SupportToggle onPress={onPress} />
+    <SupportToggle onPress={onPress} tooltipType={tooltipType} />
-    <AdminToggle onPress={onPress} />
+    <AdminToggle onPress={onPress} tooltipType={tooltipType} />
   </>
 )
 
@@ -55,7 +58,7 @@ export const LateralMenu = () => {
             gap: '0.5rem',
           })}
         >
-          <NavigationControls onPress={handleClose} />
+          <NavigationControls onPress={handleClose} tooltipType="delayed" />
         </Dialog>
       </Popover>
     </DialogTrigger>