From 38daf7236147459c34a4830a194bf9c514a2162e Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Tue, 23 Apr 2024 12:49:29 +0530
Subject: [PATCH] [WEB-872] chore: add tooltip to peek overview header icons.
 (#4229)

---
 .../issues/peek-overview/header.tsx           | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/web/components/issues/peek-overview/header.tsx b/web/components/issues/peek-overview/header.tsx
index 70c57c3f3..e2ad668ba 100644
--- a/web/components/issues/peek-overview/header.tsx
+++ b/web/components/issues/peek-overview/header.tsx
@@ -112,22 +112,28 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
       }`}
     >
       <div className="flex items-center gap-4">
-        <button onClick={removeRoutePeekId}>
-          <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
-        </button>
+        <Tooltip tooltipContent="Close the peek view" isMobile={isMobile}>
+          <button onClick={removeRoutePeekId}>
+            <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+          </button>
+        </Tooltip>
 
-        <Link href={`/${issueLink}`} onClick={() => removeRoutePeekId()}>
-          <MoveDiagonal className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
-        </Link>
+        <Tooltip tooltipContent="Open issue in full screen" isMobile={isMobile}>
+          <Link href={`/${issueLink}`} onClick={() => removeRoutePeekId()}>
+            <MoveDiagonal className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+          </Link>
+        </Tooltip>
         {currentMode && (
           <div className="flex flex-shrink-0 items-center gap-2">
             <CustomSelect
               value={currentMode}
               onChange={(val: any) => setPeekMode(val)}
               customButton={
-                <button type="button" className="">
-                  <currentMode.icon className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
-                </button>
+                <Tooltip tooltipContent="Toggle peek view layout" isMobile={isMobile}>
+                  <button type="button" className="">
+                    <currentMode.icon className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+                  </button>
+                </Tooltip>
               }
             >
               {PEEK_OPTIONS.map((mode) => (