add tooltip

src/components/Text.tsx

@@ -18,6 +18,7 @@ const Text = (props: IText) => {
     const { title, content, className = "", action } = props
     const options = props.options ?? {}
     const oClass = options.class || {}
+    const oTooltip = options.tooltip || {}
 
     return (
         <div className={twMerge(oClass.main, className)}>
@@ -28,17 +29,65 @@ const Text = (props: IText) => {
                         oClass.title
                     )}
                 >
-                    {title}
+                    {title}{" "}
+                    {oTooltip.title ? (
+                        <div
+                            className="tooltip tooltip-base-100 "
+                            data-tip={oTooltip.title}
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                                strokeWidth={2}
+                                className="text-secondary h-5 w-5 cursor-pointer"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+                                />
+                            </svg>
+                        </div>
+                    ) : (
+                        <></>
+                    )}
                 </h2>
             )}
             {content && (
-                <div
-                    className={twMerge(
-                        "pt-10 text-justify text-xl leading-8",
-                        oClass.content
+                <>
+                    <span
+                        className={twMerge(
+                            "pt-10 text-justify text-xl leading-8 ",
+                            oClass.content
+                        )}
+                        dangerouslySetInnerHTML={{ __html: content }}
+                    />
+                    {oTooltip.content ? (
+                        <span
+                            className="tooltip tooltip-base-100 tooltip-color:tooltip-base-100!"
+                            data-tip={oTooltip.content}
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                                strokeWidth={2}
+                                className="text-secondary h-5 w-5 cursor-pointer"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+                                />
+                            </svg>
+                        </span>
+                    ) : (
+                        <></>
                     )}
-                    dangerouslySetInnerHTML={{ __html: content }}
-                ></div>
+                </>
             )}
             {action && action.name !== "" ? (
                 <Button