From ded28fc441c8af6a5b127c72d44eb239853735d4 Mon Sep 17 00:00:00 2001
From: steveninhle <lephuocninh7118@gmail.com>
Date: Fri, 17 Jan 2025 14:45:14 +0700
Subject: [PATCH] feat: update tooltip members form

---
 ui/dashboard/src/components/tooltip/index.tsx              | 5 ++++-
 .../pages/members/member-modal/add-member-modal/index.tsx  | 6 ++++--
 .../pages/members/member-modal/edit-member-modal/index.tsx | 7 ++++---
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/ui/dashboard/src/components/tooltip/index.tsx b/ui/dashboard/src/components/tooltip/index.tsx
index 8e8a606f4..960e55e5a 100644
--- a/ui/dashboard/src/components/tooltip/index.tsx
+++ b/ui/dashboard/src/components/tooltip/index.tsx
@@ -9,6 +9,7 @@ export type TooltipProps = {
   content?: string;
   trigger: ReactNode;
   className?: string;
+  alignOffset?: number;
 };
 
 const TooltipProvider = TooltipPrimitive.Provider;
@@ -45,7 +46,8 @@ const Tooltip = forwardRef(
       hidden,
       content,
       trigger,
-      className
+      className,
+      alignOffset = 0
     }: TooltipProps,
     ref: Ref<HTMLDivElement>
   ) => {
@@ -61,6 +63,7 @@ const Tooltip = forwardRef(
               ref={ref}
               className={className}
               sideOffset={5}
+              alignOffset={alignOffset}
               align={align}
             >
               {content}
diff --git a/ui/dashboard/src/pages/members/member-modal/add-member-modal/index.tsx b/ui/dashboard/src/pages/members/member-modal/add-member-modal/index.tsx
index 31189c613..6cdb2e7c9 100644
--- a/ui/dashboard/src/pages/members/member-modal/add-member-modal/index.tsx
+++ b/ui/dashboard/src/pages/members/member-modal/add-member-modal/index.tsx
@@ -235,13 +235,15 @@ const AddMemberModal = ({ isOpen, onClose }: AddMemberModalProps) => {
                   <Form.Label required className="relative w-fit">
                     {t('tags')}
                     <Tooltip
+                      align="start"
+                      alignOffset={-44}
                       trigger={
-                        <div className="flex-center absolute top-0 -right-8">
+                        <div className="flex-center absolute top-0 -right-6">
                           <Icon icon={IconInfo} size={'sm'} color="gray-600" />
                         </div>
                       }
                       content={t('form:member-tags-tooltip')}
-                      className="!z-[100]"
+                      className="!z-[100] max-w-[400px]"
                     />
                   </Form.Label>
                   <Form.Control>
diff --git a/ui/dashboard/src/pages/members/member-modal/edit-member-modal/index.tsx b/ui/dashboard/src/pages/members/member-modal/edit-member-modal/index.tsx
index 223d1d290..2afbf431d 100644
--- a/ui/dashboard/src/pages/members/member-modal/edit-member-modal/index.tsx
+++ b/ui/dashboard/src/pages/members/member-modal/edit-member-modal/index.tsx
@@ -282,14 +282,15 @@ const EditMemberModal = ({ isOpen, onClose, member }: EditMemberModalProps) => {
                   <Form.Label required className="relative w-fit">
                     {t('tags')}
                     <Tooltip
-                      delayDuration={500}
+                      align="start"
+                      alignOffset={-44}
                       trigger={
-                        <div className="flex-center absolute top-0 -right-8">
+                        <div className="flex-center absolute top-0 -right-6">
                           <Icon icon={IconInfo} size={'sm'} color="gray-600" />
                         </div>
                       }
                       content={t('form:member-tags-tooltip')}
-                      className="!z-[100]"
+                      className="!z-[100] max-w-[400px]"
                     />
                   </Form.Label>
                   <Form.Control>