add tooltip components

index.d.ts

@@ -72,6 +72,13 @@ interface BadgeProps {
 }
 export function Badge(props: BadgeProps): JSX.Element
 
+interface TooltipProps {
+    children?: React.ReactNode
+    text?: string
+    className?: string
+}
+export function Tooltip(props: TooltipProps): JSX.Element
+
 interface TocProps {
     children?: React.ReactNode
     className?: string

src/components/Text.tsx

 import React from "react"
 import Button from "./core/Button"
 import { twMerge } from "tailwind-merge"
+import { InformationCircleIcon } from "@heroicons/react/outline"
+import Tooltip from "./core/Tooltip"
 
 interface IText {
     title?: string
+    subtitle?: string
     content?: string
     className?: string
     action?: {
@@ -15,7 +18,7 @@ interface IText {
 }
 
 const Text = (props: IText) => {
-    const { title, content, className = "", action } = props
+    const { title, content, className = "", action, subtitle } = props
     const options = props.options ?? {}
     const oClass = options.class || {}
     const oTooltip = options.tooltip || {}
@@ -31,30 +34,31 @@ const Text = (props: IText) => {
                 >
                     {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>
+                        <Tooltip text={oTooltip.title}>
+                            <InformationCircleIcon className="text-secondary h-5 w-5 cursor-pointer" />
+                        </Tooltip>
                     ) : (
                         <></>
                     )}
                 </h2>
             )}
+            {subtitle && (
+                <h4
+                    className={twMerge(
+                        "mt-2 text-2xl font-bold",
+                        oClass.subtitle
+                    )}
+                >
+                    {subtitle}{" "}
+                    {oTooltip.subtitle ? (
+                        <Tooltip text={oTooltip.subtitle}>
+                            <InformationCircleIcon className="text-secondary h-5 w-5 cursor-pointer" />
+                        </Tooltip>
+                    ) : (
+                        <></>
+                    )}
+                </h4>
+            )}
             {content && (
                 <>
                     <span
@@ -65,25 +69,9 @@ const Text = (props: IText) => {
                         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>
+                        <Tooltip text={oTooltip.content}>
+                            <InformationCircleIcon className="text-secondary h-5 w-5 cursor-pointer" />
+                        </Tooltip>
                     ) : (
                         <></>
                     )}

src/components/core/Tooltip.tsx

+import React from "react"
+import { InformationCircleIcon } from "@heroicons/react/outline"
+
+interface Props {
+    children?: React.ReactNode
+    text?: string
+    className?: string
+}
+
+const Tooltip = (props: Props) => {
+    const { children, text = "", className = "" } = props
+
+    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" />
+                    {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>
+    )
+}
+
+export default Tooltip