feat: add tooltip for Other in grade distribution (#709)

* feat: add tooltip

* refactor: lint happy

* chore: lint

---------

Co-authored-by: Derek Chen <derex1987@gmail.com>

src/views/components/common/Tooltip.tsx

@@ -0,0 +1,44 @@
+import clsx from 'clsx';
+import type { PropsWithChildren, ReactNode } from 'react';
+import React from 'react';
+
+interface TooltipProps {
+    className?: string;
+    contentClassName?: string;
+    content: ReactNode;
+    offsetX: number;
+    offsetY: number;
+    maxWidth?: number;
+}
+
+/**
+ * Tooltip that displays content on hover
+ */
+export default function Tooltip({
+    className,
+    contentClassName,
+    content,
+    offsetX,
+    offsetY,
+    maxWidth,
+    children,
+}: PropsWithChildren<TooltipProps>): JSX.Element {
+    return (
+        <span className={clsx('relative inline-flex group', className)}>
+            {children}
+            <span
+                className={clsx(
+                    'pointer-events-none absolute rounded-md bg-white px-3 py-2 text-xs invisible opacity-0 transition-opacity group-hover:visible group-hover:opacity-100 whitespace-normal break-words',
+                    contentClassName
+                )}
+                style={{
+                    marginTop: offsetY,
+                    marginLeft: offsetX,
+                    maxWidth,
+                }}
+            >
+                {content}
+            </span>
+        </span>
+    );
+}