feat: add tooltip component

frontend/src/components/common/Tooltip/Tooltip.interface.ts

@@ -0,0 +1,3 @@
+export interface TooltipProps {
+ tooltipText: string;
+}

frontend/src/components/common/Tooltip/Tooltip.tsx

@@ -0,0 +1,38 @@
+'use client';
+import {FC, PropsWithChildren, useState} from 'react';
+import { Popover, Transition } from '@headlessui/react'
+import {TooltipProps} from "./Tooltip.interface";
+
+export const TooltipPopover: FC<PropsWithChildren<TooltipProps>> = ({tooltipText, children}) => {
+  const [open, setOpen] = useState(false)
+  return (
+      <Popover className="relative">
+        <Popover.Button
+            onMouseEnter={() => setOpen(true)}
+            onMouseLeave={() => setOpen(false)}
+            className="focus:outline-none"
+        >
+          {children}
+        </Popover.Button>
+        <Transition
+            show={open}
+            enter="transition duration-100 ease-out"
+            enterFrom="transform scale-95 opacity-0"
+            enterTo="transform scale-100 opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform scale-100 opacity-100"
+            leaveTo="transform scale-95 opacity-0"
+        >
+          <Popover.Panel
+              static
+              transition
+              className={`absolute w-screen max-w-max z-10 bg-grey-800 px-3 py-2 rounded`}
+          >
+            <div className="shadow-lg max-w-[480px] text-sm text-white">
+              <p>{tooltipText}</p>
+            </div>
+          </Popover.Panel>
+        </Transition>
+      </Popover>
+);
+};

frontend/src/components/common/Tooltip/index.ts

@@ -0,0 +1 @@
+export {TooltipPopover as Tooltip} from './Tooltip';

frontend/tailwind.config.ts

@@ -50,6 +50,9 @@ const config: Config = {
         500: '#E9CE40',
         600: '#C6A700',
       },
+      grey: {
+        800: '#2C2E3A',
+      }
     },
     fontSize: {
       xs: ['0.75rem', '1rem'], // Body XS