Merge pull request #537 from OpenSignLabs/tooltip_pos

Author: nxglabs

apps/OpenSign/src/components/dashboard/DashboardCard.js

@@ -353,7 +353,7 @@ const DashboardCard = (props) => {
           </div>
         </div>
       </div>
-      <div className="text-xs absolute top-1 right-1">
+      <div className="text-xs absolute top-2 right-1">
         <Tooltip id={props.Label} iconColor={"white"} message={props?.Data?.tourMessage} />
       </div>
     </div>

apps/OpenSign/src/components/shared/fields/SelectFolder.js

@@ -196,7 +196,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
             {selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
           </p>
         </div>
-        <div className="absolute top-1 right-1 cursor-pointer">
+        <div className="absolute top-2 right-1 cursor-pointer">
           <Tooltip
             message={
               "If you do not select a folder, your signed document will be saved in the Main OpenSign drive folder."

apps/OpenSign/src/components/shared/fields/SignersInput.js

@@ -105,7 +105,7 @@ const SignersInput = (props) => {
 
   return (
     <div className="text-xs mt-2 ">
-      <label className="block">
+      <label className="block relative">
         Signers
         {props.required && <span className="text-red-500 text-[13px]">*</span>}
         <span className="absolute ml-1 text-xs z-50">

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]" />
     </>