From 79b6081bb4667a91f29dda48b2e7d6b78a78ae4c Mon Sep 17 00:00:00 2001
From: faisolavolut <faisol@avolut.com>
Date: Tue, 18 Feb 2025 13:02:31 +0700
Subject: [PATCH] feat: add side prop to TooltipBetter component for
 customizable tooltip positioning

---
 components/form/Field.tsx        | 413 ++++++++++++++++---------------
 components/ui/tooltip-better.tsx |   7 +-
 2 files changed, 215 insertions(+), 205 deletions(-)

diff --git a/components/form/Field.tsx b/components/form/Field.tsx
index 7a33cb0..0c5a224 100644
--- a/components/form/Field.tsx
+++ b/components/form/Field.tsx
@@ -10,12 +10,14 @@ import { getNumber } from "@/lib/utils/getNumber";
 import { useLocal } from "@/lib/utils/use-local";
 import { FieldRadio } from "./field/TypeRadio";
 import { cn } from "@/lib/utils";
+import { TooltipBetter } from "../ui/tooltip-better";
 
 export const Field: React.FC<{
   fm: any;
   label?: string;
   name: string;
   isBetter?: boolean;
+  tooltip?: string;
   onLoad?: () => Promise<any> | any;
   type?:
     | "rating"
@@ -70,6 +72,7 @@ export const Field: React.FC<{
   suffix,
   allowNew,
   unique = true,
+  tooltip,
 }) => {
   let result = null;
   const field = useLocal({
@@ -155,211 +158,215 @@ export const Field: React.FC<{
         ) : (
           <></>
         )}
-        <div
-          className={cn(
-            error
-              ? "flex flex-row rounded-md flex-grow border-red-500 border items-center"
-              : "flex flex-row rounded-md flex-grow  items-center",
-            is_disable
-              ? "border border-gray-100 bg-gray-100"
-              : "border border-gray-300 ",
-            "relative field",
-            !is_disable
-              ? style === "underline" || style === "gform"
-                ? "focus-within:border-b focus-within:border-b-primary"
-                : "focus-within:border focus-within:border-primary"
-              : "",
-            style === "underline" || style === "gform"
-              ? "rounded-none border-transparent border-b-gray-300"
-              : "",
-            [
-              "rating",
-              "color",
-              "single-checkbox",
-              "radio",
-              "checkbox",
-            ].includes(type) &&
-              css`
-                border: 0px !important;
-              `,
-            ["upload"].includes(type) &&
-              css`
-                padding: 0px !important;
-              `,
-            classField
-          )}
-        >
-          {before && (
-            <div
-              // ref={prefixRef}
-              className={cx(
-                "px-1 py-1  items-center flex flex-row flex-grow rounded-l-md h-full",
+        <TooltipBetter content={tooltip} side="bottom">
+          <div
+            className={cn(
+              error
+                ? "flex flex-row rounded-md flex-grow border-red-500 border items-center"
+                : "flex flex-row rounded-md flex-grow  items-center",
+              is_disable
+                ? "border border-gray-100 bg-gray-100"
+                : "border border-gray-300 ",
+              "relative field",
+              !is_disable
+                ? style === "underline" || style === "gform"
+                  ? "focus-within:border-b focus-within:border-b-primary"
+                  : "focus-within:border focus-within:border-primary"
+                : "",
+              style === "underline" || style === "gform"
+                ? "rounded-none border-transparent border-b-gray-300"
+                : "",
+              [
+                "rating",
+                "color",
+                "single-checkbox",
+                "radio",
+                "checkbox",
+              ].includes(type) &&
                 css`
-                  height: 2.13rem;
-                `
-                // style === "gform"
-                //   ? ""
-                //   : is_disable
-                //   ? "bg-gray-200/50 "
-                //   : "bg-gray-200/50 "
-              )}
-            >
-              {before}
-            </div>
-          )}
-          {["upload"].includes(type) ? (
-            <>
-              <TypeUpload
-                fm={fm}
-                name={name}
-                on_change={onChange}
-                mode={"upload"}
-                disabled={is_disable}
-              />
-            </>
-          ) : ["multi-upload"].includes(type) ? (
-            <>
-              <TypeUpload
-                fm={fm}
-                name={name}
-                on_change={onChange}
-                mode={"upload"}
-                type="multi"
-                disabled={is_disable}
-              />
-            </>
-          ) : ["dropdown"].includes(type) ? (
-            <>
-              <TypeDropdown
-                fm={fm}
-                required={required}
-                name={name}
-                onLoad={onLoad}
-                placeholder={placeholder}
-                disabled={is_disable}
-                onChange={onChange}
-                allowNew={allowNew}
-              />
-            </>
-          ) : ["multi-dropdown"].includes(type) ? (
-            <>
-              <TypeDropdown
-                fm={fm}
-                required={required}
-                name={name}
-                onLoad={onLoad}
-                placeholder={placeholder}
-                disabled={is_disable}
-                onChange={onChange}
-                mode="multi"
-                unique={unique}
-                isBetter={isBetter}
-              />
-            </>
-          ) : ["checkbox"].includes(type) ? (
-            <>
-              <FieldCheckbox
-                fm={fm}
-                name={name}
-                onLoad={onLoad}
-                placeholder={placeholder}
-                disabled={is_disable}
-                onChange={onChange}
-                className={className}
-              />
-            </>
-          ) : ["radio"].includes(type) ? (
-            <>
-              <FieldRadio
-                fm={fm}
-                name={name}
-                onLoad={onLoad}
-                placeholder={placeholder}
-                disabled={is_disable}
-                onChange={onChange}
-                className={className}
-              />
-            </>
-          ) : ["single-checkbox"].includes(type) ? (
-            <>
-              <FieldCheckbox
-                fm={fm}
-                name={name}
-                onLoad={onLoad}
-                placeholder={placeholder}
-                disabled={is_disable}
-                className={className}
-                onChange={onChange}
-                mode="single"
-              />
-            </>
-          ) : ["richtext"].includes(type) ? (
-            <>
-              <TypeRichText
-                fm={fm}
-                name={name}
-                disabled={is_disable}
-                className={className}
-                onChange={onChange}
-              />
-            </>
-          ) : ["tag"].includes(type) ? (
-            <>
-              <TypeTag
-                fm={fm}
-                name={name}
-                disabled={is_disable}
-                className={className}
-                onChange={onChange}
-              />
-            </>
-          ) : (
-            <>
-              <TypeInput
-                fm={fm}
-                name={name}
-                placeholder={placeholder}
-                required={required}
-                type={type}
-                disabled={is_disable}
-                onChange={onChange}
-                onFocus={() => {
-                  field.focus = true;
-                  field.render();
-                }}
-                className={cx(
-                  before &&
-                    css`
-                      padding-left: ${getNumber(
-                        get(prefixRef, "current.clientWidth")
-                      ) + 10}px;
-                    `,
-                  after &&
-                    css`
-                      padding-right: ${getNumber(
-                        get(suffixRef, "current.clientWidth")
-                      ) + 10}px;
-                    `,
-                  className
-                )}
-              />
-            </>
-          )}
-          {after && (
-            <div
-              // ref={suffixRef}
-              className={cx(
-                "px-1 py-1  items-center flex flex-row flex-grow rounded-r-md h-full",
-                css`
-                  height: 2.13rem;
+                  border: 0px !important;
                 `,
-                is_disable ? "bg-gray-200/50 " : "bg-gray-200/50 "
-              )}
-            >
-              {after}
-            </div>
-          )}
-        </div>
+              ["upload"].includes(type) &&
+                css`
+                  padding: 0px !important;
+                `,
+              classField
+            )}
+          >
+            {before && (
+              <div
+                // ref={prefixRef}
+                className={cx(
+                  "px-1 py-1  items-center flex flex-row flex-grow rounded-l-md h-full",
+                  css`
+                    height: 2.13rem;
+                  `
+                  // style === "gform"
+                  //   ? ""
+                  //   : is_disable
+                  //   ? "bg-gray-200/50 "
+                  //   : "bg-gray-200/50 "
+                )}
+              >
+                {before}
+              </div>
+            )}
+
+            {["upload"].includes(type) ? (
+              <>
+                <TypeUpload
+                  fm={fm}
+                  name={name}
+                  on_change={onChange}
+                  mode={"upload"}
+                  disabled={is_disable}
+                />
+              </>
+            ) : ["multi-upload"].includes(type) ? (
+              <>
+                <TypeUpload
+                  fm={fm}
+                  name={name}
+                  on_change={onChange}
+                  mode={"upload"}
+                  type="multi"
+                  disabled={is_disable}
+                />
+              </>
+            ) : ["dropdown"].includes(type) ? (
+              <>
+                <TypeDropdown
+                  fm={fm}
+                  required={required}
+                  name={name}
+                  onLoad={onLoad}
+                  placeholder={placeholder}
+                  disabled={is_disable}
+                  onChange={onChange}
+                  allowNew={allowNew}
+                />
+              </>
+            ) : ["multi-dropdown"].includes(type) ? (
+              <>
+                <TypeDropdown
+                  fm={fm}
+                  required={required}
+                  name={name}
+                  onLoad={onLoad}
+                  placeholder={placeholder}
+                  disabled={is_disable}
+                  onChange={onChange}
+                  mode="multi"
+                  unique={unique}
+                  isBetter={isBetter}
+                />
+              </>
+            ) : ["checkbox"].includes(type) ? (
+              <>
+                <FieldCheckbox
+                  fm={fm}
+                  name={name}
+                  onLoad={onLoad}
+                  placeholder={placeholder}
+                  disabled={is_disable}
+                  onChange={onChange}
+                  className={className}
+                />
+              </>
+            ) : ["radio"].includes(type) ? (
+              <>
+                <FieldRadio
+                  fm={fm}
+                  name={name}
+                  onLoad={onLoad}
+                  placeholder={placeholder}
+                  disabled={is_disable}
+                  onChange={onChange}
+                  className={className}
+                />
+              </>
+            ) : ["single-checkbox"].includes(type) ? (
+              <>
+                <FieldCheckbox
+                  fm={fm}
+                  name={name}
+                  onLoad={onLoad}
+                  placeholder={placeholder}
+                  disabled={is_disable}
+                  className={className}
+                  onChange={onChange}
+                  mode="single"
+                />
+              </>
+            ) : ["richtext"].includes(type) ? (
+              <>
+                <TypeRichText
+                  fm={fm}
+                  name={name}
+                  disabled={is_disable}
+                  className={className}
+                  onChange={onChange}
+                />
+              </>
+            ) : ["tag"].includes(type) ? (
+              <>
+                <TypeTag
+                  fm={fm}
+                  name={name}
+                  disabled={is_disable}
+                  className={className}
+                  onChange={onChange}
+                />
+              </>
+            ) : (
+              <>
+                <TypeInput
+                  fm={fm}
+                  name={name}
+                  placeholder={placeholder}
+                  required={required}
+                  type={type}
+                  disabled={is_disable}
+                  onChange={onChange}
+                  onFocus={() => {
+                    field.focus = true;
+                    field.render();
+                  }}
+                  className={cx(
+                    before &&
+                      css`
+                        padding-left: ${getNumber(
+                          get(prefixRef, "current.clientWidth")
+                        ) + 10}px;
+                      `,
+                    after &&
+                      css`
+                        padding-right: ${getNumber(
+                          get(suffixRef, "current.clientWidth")
+                        ) + 10}px;
+                      `,
+                    className
+                  )}
+                />
+              </>
+            )}
+            {after && (
+              <div
+                // ref={suffixRef}
+                className={cx(
+                  "px-1 py-1  items-center flex flex-row flex-grow rounded-r-md h-full",
+                  css`
+                    height: 2.13rem;
+                  `,
+                  is_disable ? "bg-gray-200/50 " : "bg-gray-200/50 "
+                )}
+              >
+                {after}
+              </div>
+            )}
+          </div>
+        </TooltipBetter>
+
         {error ? (
           <div className="text-sm text-red-500 py-1">{error}</div>
         ) : (
diff --git a/components/ui/tooltip-better.tsx b/components/ui/tooltip-better.tsx
index f8e6ca7..6ffcc52 100644
--- a/components/ui/tooltip-better.tsx
+++ b/components/ui/tooltip-better.tsx
@@ -6,7 +6,7 @@ import {
   TooltipTrigger,
 } from "./tooltip";
 
-export const TooltipBetter: FC<any> = ({ content, children }) => {
+export const TooltipBetter: FC<any> = ({ content, children, side = "top" }) => {
   if (content) {
     return (
       <TooltipProvider>
@@ -14,7 +14,10 @@ export const TooltipBetter: FC<any> = ({ content, children }) => {
           <TooltipTrigger asChild>
             <div className="w-full flex flex-grow flex-row">{children}</div>
           </TooltipTrigger>
-          <TooltipContent className="bg-linear-sidebar-active text-white  border border-primary shadow-md transition-all ">
+          <TooltipContent
+            side={side}
+            className="bg-linear-sidebar-active text-white  border border-primary shadow-md transition-all "
+          >
             <p>{content}</p>
           </TooltipContent>
         </Tooltip>