simplify tooltip (include icon) - default text-info (adjust with theme)

src/components/Text.tsx

@@ -32,13 +32,7 @@ const Text = (props: IText) => {
                     )}
                 >
                     {title}
-                    {oTooltip.title ? (
-                        <Tooltip text={oTooltip.title}>
-                            <InformationCircleIcon className="text-secondary h-5 w-5 cursor-pointer" />
-                        </Tooltip>
-                    ) : (
-                        <></>
-                    )}
+                    <Tooltip text={oTooltip.title} />
                 </h2>
             )}
             {subtitle && (
@@ -48,14 +42,8 @@ const Text = (props: IText) => {
                         oClass.subtitle
                     )}
                 >
-                    {subtitle}{" "}
-                    {oTooltip.subtitle ? (
-                        <Tooltip text={oTooltip.subtitle}>
-                            <InformationCircleIcon className="text-secondary h-5 w-5 cursor-pointer" />
-                        </Tooltip>
-                    ) : (
-                        <></>
-                    )}
+                    {subtitle}
+                    <Tooltip text={oTooltip.subtitle} />
                 </h4>
             )}
             {content && (
@@ -68,13 +56,7 @@ const Text = (props: IText) => {
                         )}
                         dangerouslySetInnerHTML={{ __html: content }}
                     />
-                    {oTooltip.content ? (
-                        <Tooltip text={oTooltip.content}>
-                            <InformationCircleIcon className="text-secondary h-5 w-5 cursor-pointer" />
-                        </Tooltip>
-                    ) : (
-                        <></>
-                    )}
+                    <Tooltip text={oTooltip.content} />
                 </>
             )}
             {action && action.name !== "" ? (

src/components/core/Tooltip.tsx

 import React from "react"
+import { twMerge } from "tailwind-merge"
+
 import { InformationCircleIcon } from "@heroicons/react/outline"
 
 interface Props {
@@ -9,16 +11,15 @@ interface Props {
 
 const Tooltip = (props: Props) => {
     const { children, text = "", className = "" } = props
+    if (text === "") return null
 
-    console.log("text", text)
     return (
-        <span className={`tooltip ${className}`}>
-            <div className="group inline-block">
-                {children}
-                <div className="invisible absolute bottom-full left-1/2 z-10 mt-2  w-56 -translate-x-1/2 transform rounded-lg bg-white p-5 py-2 text-xs  opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100">
-                    <InformationCircleIcon className="text-secondary m-2 mx-auto h-5 w-5 text-center" />
+        <span className={twMerge("tooltip", className)}>
+            <div className="group ml-2 inline-block">
+                <InformationCircleIcon className="text-info h-4 w-4 cursor-pointer" />
+                <div className="invisible absolute bottom-full left-1/2 z-10 mt-2 w-56 -translate-x-1/2 transform rounded-lg bg-white p-5 py-2 text-xs font-normal opacity-0 shadow transition-all duration-300 group-hover:visible group-hover:opacity-100">
+                    <InformationCircleIcon className="text-info m-2 mx-auto h-6 w-6 text-center" />
                     {text}
-                    {/* <div className=" absolute left-1/2 h-4 w-4 -translate-x-2 rotate-45 transform  border-gray-800 bg-white"></div> */}
                 </div>
             </div>
         </span>