feat: add side prop to TooltipBetter component for customizable tooltip positioning

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,6 +158,7 @@ export const Field: React.FC<{
         ) : (
           <></>
         )}
+        <TooltipBetter content={tooltip} side="bottom">
           <div
             className={cn(
               error
@@ -207,6 +211,7 @@ export const Field: React.FC<{
                 {before}
               </div>
             )}
+
             {["upload"].includes(type) ? (
               <>
                 <TypeUpload
@@ -360,6 +365,8 @@ export const Field: React.FC<{
               </div>
             )}
           </div>
+        </TooltipBetter>
+
         {error ? (
           <div className="text-sm text-red-500 py-1">{error}</div>
         ) : (

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>