From 82426516559e8999fedf26a7bf4bb37b2f444386 Mon Sep 17 00:00:00 2001
From: Camille Moussu <66134347+Eriikah@users.noreply.github.com>
Date: Fri, 17 Apr 2026 09:56:24 +0200
Subject: [PATCH] [#734] set free busy tooltip to show up only on hover (#802)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>
---
 .../Attendees/FreeBusyIndicator.tsx           | 22 ++++---------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/src/components/Attendees/FreeBusyIndicator.tsx b/src/components/Attendees/FreeBusyIndicator.tsx
index 321f94f..4287216 100644
--- a/src/components/Attendees/FreeBusyIndicator.tsx
+++ b/src/components/Attendees/FreeBusyIndicator.tsx
@@ -1,7 +1,5 @@
 import { Tooltip } from '@linagora/twake-mui'
 import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled'
-import CloseIcon from '@mui/icons-material/Close'
-import { useEffect, useState } from 'react'
 import { useI18n } from 'twake-i18n'
 import { FreeBusyStatus } from './useFreeBusy'
 
@@ -10,15 +8,10 @@ interface FreeBusyIndicatorProps {
   size?: number
 }
 
-export function FreeBusyIndicator({ status }: FreeBusyIndicatorProps) {
+export const FreeBusyIndicator: React.FC<FreeBusyIndicatorProps> = ({
+  status
+}) => {
   const { t } = useI18n()
-  const [open, setOpen] = useState(false)
-  useEffect(() => {
-    const triggerOpen = () => {
-      if (status === 'busy') setOpen(true)
-    }
-    triggerOpen()
-  }, [status])
 
   if (status !== 'busy') return null
 
@@ -27,17 +20,10 @@ export function FreeBusyIndicator({ status }: FreeBusyIndicatorProps) {
       title={
         <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
           {t('event.freeBusy.busy')}
-          <CloseIcon
-            fontSize="inherit"
-            style={{ cursor: 'pointer' }}
-            onClick={() => setOpen(false)}
-          />
         </span>
       }
-      open={open}
-      disableHoverListener
+      leaveDelay={2000}
       placement="bottom-start"
-      onClose={() => setOpen(false)}
       slotProps={{ tooltip: { sx: { opacity: 1, bgcolor: 'grey.900' } } }}
     >
       <AccessTimeFilledIcon