use hint in navbar

Author: Kraysent

src/components/core/Hint.tsx

@@ -2,24 +2,46 @@ import { Tooltip } from "flowbite-react";
 import { ReactElement, ReactNode } from "react";
 import { MdHelpOutline } from "react-icons/md";
 
+export type HintPosition = "top" | "left" | "right" | "bottom";
+
 interface HintProps {
   children: ReactElement;
   hintContent: ReactNode;
+  position?: HintPosition;
   className?: string;
+  trigger?: "icon" | "child";
 }
 
+const tooltipClassName = "bg-gray-600 z-10 border-1 max-w-xl";
+
 export function Hint(props: HintProps): ReactElement {
+  const placement = props.position ?? "top";
+  const trigger = props.trigger ?? "icon";
+
+  if (trigger === "child") {
+    return (
+      <Tooltip
+        content={props.hintContent}
+        arrow={false}
+        placement={placement}
+        className={tooltipClassName}
+      >
+        {props.children}
+      </Tooltip>
+    );
+  }
+
   return (
     <div
-      className={`flex items-center justify-center gap-2 ${props.className}`}
+      className={`flex items-center justify-center gap-2 ${props.className ?? ""}`}
     >
       <div>{props.children}</div>
       <div>
         <Tooltip
           content={props.hintContent}
           arrow={false}
-          placement="top"
-          className="bg-gray-600 z-10 border-1 max-w-xl"
+          placement={placement}
+          className={tooltipClassName}
         >
           <MdHelpOutline />
         </Tooltip>

src/components/ui/Navbar.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { NavLink } from "react-router-dom";
-import { Tooltip } from "flowbite-react";
 import { MdInfo, MdSearch, MdTableChart } from "react-icons/md";
+import { Hint } from "../core/Hint";
 import { Link } from "../core/Link";
 
 const navItems = [
@@ -34,12 +34,11 @@ export function Navbar() {
     <>
       <nav className="fixed left-0 top-0 h-screen w-12 flex flex-col items-center pt-4 pb-4 gap-2 bg-[#1a1a1a] z-20">
         {navItems.map((item) => (
-          <Tooltip
+          <Hint
             key={item.to}
-            content={item.label}
-            placement="right"
-            arrow={false}
-            className="bg-gray-600 z-10 backdrop-blur-sm bg-opacity-99 border-1"
+            hintContent={item.label}
+            position="right"
+            trigger="child"
           >
             <NavLink
               to={item.to}
@@ -54,7 +53,7 @@ export function Navbar() {
             >
               {item.icon}
             </NavLink>
-          </Tooltip>
+          </Hint>
         ))}
 
         <div className="mt-auto">