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/admins/index.tsx

@@ -3,6 +3,7 @@
 import { PencilSquareIcon, TrashIcon, UserSettingIcon } from "@/assets/icons";
 import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import Modal from "@/components/ui/modal";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
 import Status from "@/components/ui/Status";
 import {
   Table,
@@ -15,6 +16,7 @@ import {
 import TableSkeleton from "@/components/ui/TableSkeleton";
 import { AdminStatus } from "@/constants/enums";
 import Link from "next/link";
+import { Tooltip } from "react-tooltip";
 import ChangeStatusModalContent from "./ChangeStatusModalContent";
 import { useAdminsPresenter } from "./useAdminsPresenter";
 
@@ -82,29 +84,43 @@ const AdminsTable = () => {
                 <TableCell className="text-start xl:pr-7.5">
                   <div className="flex items-center justify-start gap-x-3.5">
                     <button
+                      data-tooltip-id="delete"
+                      data-tooltip-content="Delete"
+                      data-tooltip-place="top"
                       className="hover:text-red-500"
                       onClick={() => {
                         setCurrentUser(item);
                         setIsModalOpen(true);
                       }}
                     >
+                      <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
                       <span className="sr-only">Delete Admin </span>
                       <TrashIcon />
                     </button>
                     <button
+                      data-tooltip-id="change-status"
+                      data-tooltip-content="Change status"
+                      data-tooltip-place="top"
                       className="hover:text-yellow-dark"
                       onClick={() => {
                         setCurrentUser(item);
                         setIsChangeStatusModalOpen(true);
                       }}
                     >
+                      <Tooltip
+                        {..._TooltipDefaultParams({ id: "change-status" })}
+                      />
                       <span className="sr-only">Change Admin Status</span>
                       <UserSettingIcon />
                     </button>
                     <button
+                      data-tooltip-id="edit"
+                      data-tooltip-content="Edit"
+                      data-tooltip-place="top"
                       className="hover:text-primary"
                       onClick={() => router.push(`/admins/edit/${item.id}`)}
                     >
+                      <Tooltip {..._TooltipDefaultParams({ id: "edit" })} />
                       <span className="sr-only">Edit Admin </span>
                       <PencilSquareIcon />
                     </button>