From 088bc181bdb53d397221e24a26a71534c2b1ab63 Mon Sep 17 00:00:00 2001
From: Klotske <ilya@mokhov.vg>
Date: Wed, 4 Jan 2023 16:15:22 +0300
Subject: [PATCH] Add tooltip to Report button

---
 website/src/components/FlaggableElement.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/website/src/components/FlaggableElement.tsx b/website/src/components/FlaggableElement.tsx
index c8fc17ce..bc245bd2 100644
--- a/website/src/components/FlaggableElement.tsx
+++ b/website/src/components/FlaggableElement.tsx
@@ -15,6 +15,7 @@ import {
   SliderThumb,
   SliderTrack,
   Spacer,
+  Tooltip,
   useBoolean,
   useId,
 } from "@chakra-ui/react";
@@ -69,11 +70,15 @@ export const FlaggableElement = (props) => {
     >
       <Grid templateColumns="1fr min-content" gap={2}>
         <PopoverAnchor>{props.children}</PopoverAnchor>
-        <PopoverTrigger>
-          <Button h="full">
-            <FlagIcon className="w-4 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
-          </Button>
-        </PopoverTrigger>
+        <Tooltip hasArrow label="Report" bg="red.600">
+          <div>
+            <PopoverTrigger>
+              <Button h="full">
+                <FlagIcon className="w-4 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
+              </Button>
+            </PopoverTrigger>
+          </div>
+        </Tooltip>
       </Grid>
 
       <PopoverContent width="fit-content">