From 920c3e66cd71c406ee6c691cca4ce382b2ea4c5c Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Tue, 12 Nov 2024 10:30:34 +0200
Subject: [PATCH] feat: now tooltip will not be over the main content (#8714)

Now when pressing on new feature or import button, the tooltip will stay
in background.
---
 frontend/src/component/filter/AddFilterButton.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/filter/AddFilterButton.tsx b/frontend/src/component/filter/AddFilterButton.tsx
index 970f484e1f..db68662fab 100644
--- a/frontend/src/component/filter/AddFilterButton.tsx
+++ b/frontend/src/component/filter/AddFilterButton.tsx
@@ -20,6 +20,10 @@ const StyledButton = styled(Button)(({ theme }) => ({
     height: theme.spacing(3.75),
 }));
 
+const StyledHtmlTooltip = styled(HtmlTooltip)(({ theme }) => ({
+    zIndex: 1200,
+}));
+
 const StyledIconContainer = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
@@ -109,7 +113,7 @@ export const AddFilterButton = ({
     return (
         <div>
             {showArchiveTooltip ? (
-                <HtmlTooltip
+                <StyledHtmlTooltip
                     placement='right'
                     arrow
                     title={<ArchiveTooltip />}
@@ -119,7 +123,7 @@ export const AddFilterButton = ({
                     <StyledButton onClick={handleClick} startIcon={<Add />}>
                         Add Filter
                     </StyledButton>
-                </HtmlTooltip>
+                </StyledHtmlTooltip>
             ) : (
                 <StyledButton onClick={handleClick} startIcon={<Add />}>
                     Add Filter