refactor: reduce size of tooltip and adjust it's position

apps/OpenSign/src/primitives/Tooltip.js

@@ -1,14 +1,21 @@
 import React from "react";
 import { Tooltip as ReactTooltip } from "react-tooltip";
 import { openInNewTab } from "../constant/Utils";
-const Tooltip = ({ children, id, message, url, iconColor }) =>
+const Tooltip = ({ id, message, url, iconColor }) =>
   url ? (
     <button onClick={() => openInNewTab(url)} className="text-center">
-      {children ? (
-        children
-      ) : (
-        <i className="fa-solid fa-question text-xs border-[1.5px] px-1 rounded-full border-[#33bbff] text-[#33bbff]"></i>
-      )}
+      <sup>
+        <i
+          className="fa-solid fa-question rounded-full"
+          style={{
+            borderColor: iconColor ? iconColor : "#33bbff",
+            color: iconColor ? iconColor : "#33bbff",
+            fontSize: 13,
+            borderWidth: 1.5,
+            padding: "1.5px 4px"
+          }}
+        ></i>
+      </sup>
     </button>
   ) : (
     <>
@@ -17,17 +24,18 @@ const Tooltip = ({ children, id, message, url, iconColor }) =>
         data-tooltip-content={message}
         className="z-50"
       >
-        {children ? (
-          children
-        ) : (
+        <sup>
           <i
-            className="fa-solid fa-question text-xs border-[1.5px] px-1 rounded-full border-[#33bbff] text-[#33bbff]"
+            className="fa-solid fa-question rounded-full"
             style={{
               borderColor: iconColor ? iconColor : "#33bbff",
-              color: iconColor ? iconColor : "#33bbff"
+              color: iconColor ? iconColor : "#33bbff",
+              fontSize: 13,
+              borderWidth: 1.5,
+              padding: "1.5px 4px"
             }}
           ></i>
-        )}
+        </sup>
       </a>
       <ReactTooltip id={id ? id : "my-tooltip"} className="max-w-[200px]" />
     </>