From 11b6f343bc6ed6e3de08205a52b4cee6df1fb33c Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Tue, 6 May 2025 11:51:49 +0100
Subject: [PATCH] Merge pull request #25238 from overleaf/dp-tooltips

Add tooltip to new editor home button

GitOrigin-RevId: 91f47659caf64a7ee31ed156d4ee2d5c933e05b8
---
 .../components/toolbar/toolbar.tsx            | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx
index ed1b2509ff..56c597451e 100644
--- a/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx
@@ -11,6 +11,7 @@ import { useLayoutContext } from '@/shared/context/layout-context'
 import BackToEditorButton from '@/features/editor-navigation-toolbar/components/back-to-editor-button'
 import { useCallback } from 'react'
 import * as eventTracking from '../../../../infrastructure/event-tracking'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 
 export const Toolbar = () => {
   const { view, setView } = useLayoutContext()
@@ -45,12 +46,18 @@ const ToolbarMenus = () => {
   const { t } = useTranslation()
   return (
     <div className="ide-redesign-toolbar-menu">
-      <div className="ide-redesign-toolbar-home-button">
-        <a href="/project" className="ide-redesign-toolbar-home-link">
-          <span className="toolbar-ol-logo" aria-label={t('overleaf_logo')} />
-          <MaterialIcon type="home" className="toolbar-ol-home-button" />
-        </a>
-      </div>
+      <OLTooltip
+        id="tooltip-home-button"
+        description={t('back_to_your_projects')}
+        overlayProps={{ delay: 0, placement: 'bottom' }}
+      >
+        <div className="ide-redesign-toolbar-home-button">
+          <a href="/project" className="ide-redesign-toolbar-home-link">
+            <span className="toolbar-ol-logo" aria-label={t('overleaf_logo')} />
+            <MaterialIcon type="home" className="toolbar-ol-home-button" />
+          </a>
+        </div>
+      </OLTooltip>
       <ToolbarMenuBar />
     </div>
   )