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.
This commit is contained in:
@@ -2,6 +2,8 @@
|
||||
import { EyeIcon } from "@/assets/icons";
|
||||
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
|
||||
import Pagination from "@/components/ui/pagination";
|
||||
import { _TooltipDefaultParams } from "@/constants/tooltip";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
import Status from "@/components/ui/Status";
|
||||
import {
|
||||
Table,
|
||||
@@ -73,10 +75,18 @@ const NotificationHistoryTable = () => {
|
||||
</TableCell>
|
||||
<TableCell 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>
|
||||
</TableCell>
|
||||
|
||||
Reference in New Issue
Block a user