feat(ui): add tooltips to action icons in admins table

This commit introduces the `react-tooltip` library to improve user interface clarity and provide a better user experience.

Tooltips have been added to the action icons (Edit, Delete, Change Status) in the Admins table. This provides users with clear, on-hover information about the function of each icon, enhancing usability and reducing ambiguity.

The implementation involved:
- Adding `react-tooltip` as a project dependency.
- Importing the required CSS in the root layout.
- Integrating the `Tooltip` component within the Admins table.

src/components/Tables/tenders/index.tsx

@@ -9,11 +9,13 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { Tooltip } from "react-tooltip";
 import useTenderListPresenter from "./useTenderListPresenter";
 
 import { ExclamationIcon, EyeIcon } from "@/assets/icons";
 import Pagination from "@/components/ui/pagination";
 import TableSkeleton from "@/components/ui/TableSkeleton";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 const TendersTable = () => {
@@ -70,18 +72,30 @@ const TendersTable = () => {
                   colSpan={100}
                 >
                   <button
+                    data-tooltip-id="details"
+                    data-tooltip-content="Details"
+                    data-tooltip-place="top"
                     onClick={() => {
                       router.push(`${pathName}/${item.id}`);
                     }}
                   >
+                    <Tooltip
+                      {..._TooltipDefaultParams({
+                        id: "details",
+                      })}
+                    />
                     <EyeIcon />
                   </button>
                   <button
+                    data-tooltip-id="feedback"
+                    data-tooltip-content="Feedback"
+                    data-tooltip-place="top"
                     className="text-gray-40 rounded-full bg-gray-dark bg-opacity-5 hover:text-green-dark dark:bg-gray dark:bg-opacity-5"
                     onClick={() => {
                       router.push(`${pathName}/feedback/${item.id}`);
                     }}
                   >
+                    <Tooltip {..._TooltipDefaultParams({ id: "feedback" })} />
                     <ExclamationIcon />
                   </button>
                 </TableCell>