feat: update tooltip members form

bucketeer-io · Jan 17, 2025 · ded28fc · ded28fc
1 parent e279f8f
commit ded28fc
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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>