initiate drf app

frontend/components/ui/Tooltip.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { useState } from 'react'
+import { CiCircleInfo } from 'react-icons/ci'
+
+interface TooltipProps {
+  content: string | React.ReactNode
+}
+
+const Tooltip = ({ content }: TooltipProps) => {
+  const [showTooltip, setShowTooltip] = useState(false)
+
+  return (
+    <div className="relative flex items-center overflow-visible">
+      <button
+        type="button"
+        className="text-orange hover:text-orange/80 focus:outline-none"
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+        onClick={() => setShowTooltip(!showTooltip)}
+      >
+        <CiCircleInfo className="w-4 h-4" />
+      </button>
+      {showTooltip && (
+        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 bg-white rounded-xl text-center shadow-lg text-sm text-gray-700 w-max max-w-xs z-10">
+          {content}
+          <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-white transform rotate-45"></div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Tooltip