[#734] set free busy tooltip to show up only on hover (#802)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

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