next-helios-fe 1.8.79 → 1.8.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.79",
+  "version": "1.8.81",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/table/index.tsx

@@ -258,13 +258,13 @@ export const Table: TableComponentProps = ({
       return (
         <th
           key={item.key}
-          className="px-4 py-2 bg-secondary-bg font-medium text-left whitespace-nowrap"
+          className="whitespace-nowrap bg-secondary-bg px-4 py-2 text-left font-medium"
         >
           <div className="flex flex-col">
             <div className="flex items-center gap-2">
               <button
                 type="button"
-                className="group/header flex justify-between items-center gap-4 w-full"
+                className="group/header flex w-full items-center justify-between gap-4"
                 onClick={() => {
                   setSortBy((prev: any) => {
                     if (prev.column !== item.key) {
@@ -345,7 +345,7 @@ export const Table: TableComponentProps = ({
                               }
                             }}
                           >
-                            <div className="capitalize pointer-events-none">
+                            <div className="pointer-events-none capitalize">
                               <Form.Checkbox
                                 options={{ disableHover: true }}
                                 label={
@@ -355,7 +355,9 @@ export const Table: TableComponentProps = ({
                                     ? "null"
                                     : value?.toString()
                                 }
-                                checked={categoryFilter.includes(value)}
+                                checked={
+                                  categoryFilter.includes(value) ?? false
+                                }
                                 readOnly
                               />
                             </div>
@@ -374,11 +376,11 @@ export const Table: TableComponentProps = ({
                 />
                 <input
                   type="search"
-                  className="w-full px-6 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
+                  className="w-full border-x-0 border-b border-t-0 border-default bg-secondary-bg px-6 pb-0.5 pt-0 text-sm font-normal placeholder:translate-x-0 placeholder:text-silent placeholder:duration-300 focus:border-primary-dark focus:outline-none focus:ring-0 focus:placeholder:translate-x-1 disabled:bg-secondary-light disabled:text-disabled [&::-webkit-search-cancel-button]:appearance-none"
                   placeholder="search.."
                   value={
                     filter?.find((filterItem) => filterItem.key === item.key)
-                      ?.value
+                      ?.value || ""
                   }
                   onChange={(e) => {
                     setFilter(
@@ -423,7 +425,7 @@ export const Table: TableComponentProps = ({
     return (
       <tr key={item?.[options?.customDataIdName ?? "id"]}>
         {checkbox && (
-          <td className="sticky left-0 w-8 px-4 py-1.5 bg-secondary-bg">
+          <td className="sticky left-0 w-8 bg-secondary-bg px-4 py-1.5">
             <Form.Checkbox
               options={{ disableHover: true }}
               checked={
@@ -473,7 +475,7 @@ export const Table: TableComponentProps = ({
           </td>
         )}
         {!options?.hideNumberColumn && (
-          <td className="sticky left-0 w-8 px-4 py-1.5 bg-secondary-bg text-center">
+          <td className="sticky left-0 w-8 bg-secondary-bg px-4 py-1.5 text-center">
             {(page - 1) * maxRow + index + 1}
           </td>
         )}
@@ -484,7 +486,7 @@ export const Table: TableComponentProps = ({
               return (
                 <td
                   key={headerItem.key}
-                  className="px-4 py-1.5 bg-secondary-bg capitalize whitespace-nowrap"
+                  className="whitespace-nowrap bg-secondary-bg px-4 py-1.5 capitalize"
                 >
                   {headerItem.render(item) || "-"}
                 </td>
@@ -493,15 +495,15 @@ export const Table: TableComponentProps = ({
               return (
                 <td
                   key={headerItem.key}
-                  className="max-w-60 px-4 py-1.5 bg-secondary-bg truncate whitespace-nowrap"
+                  className="max-w-60 bg-secondary-bg px-4 py-1.5"
                 >
                   <Tooltip
                     content={item[headerItem.key as keyof typeof item] || "-"}
                     options={{ position: "top" }}
                   >
-                    <span>
+                    <div className="truncate whitespace-nowrap">
                       {item[headerItem.key as keyof typeof item] || "-"}
-                    </span>
+                    </div>
                   </Tooltip>
                 </td>
               );
@@ -509,7 +511,7 @@ export const Table: TableComponentProps = ({
           })}
         {actionColumn &&
           React.Children.toArray(actionColumn()).length !== 0 && (
-            <td className="sticky right-0 w-8 px-4 py-1.5 bg-secondary-bg text-center">
+            <td className="sticky right-0 w-8 bg-secondary-bg px-4 py-1.5 text-center">
               {actionColumn(item)}
             </td>
           )}
@@ -518,18 +520,18 @@ export const Table: TableComponentProps = ({
   });
 
   return (
-    <div className="flex flex-col gap-6 h-full">
+    <div className="flex h-full flex-col gap-6">
       {(title ||
         options?.toolbar?.addData?.show !== false ||
         options?.toolbar?.filter?.show !== false ||
         options?.toolbar?.search?.show !== false ||
         options?.toolbar?.export?.show !== false) && (
         <div
-          className={`flex items-center gap-4 w-full h-fit overflow-auto [&::-webkit-scrollbar]:hidden ${
+          className={`flex h-fit w-full items-center gap-4 overflow-auto [&::-webkit-scrollbar]:hidden ${
             !title ? "justify-end" : "justify-between"
           }`}
         >
-          {title && <span className="text-lg whitespace-nowrap">{title}</span>}
+          {title && <span className="whitespace-nowrap text-lg">{title}</span>}
           <div className="flex items-center gap-4">
             {options?.toolbar?.customTool &&
               options?.toolbar?.customTool?.length !== 0 &&
@@ -553,7 +555,7 @@ export const Table: TableComponentProps = ({
                     >
                       <button
                         type="button"
-                        className={`p-1.5 rounded-full text-white ${variant}`}
+                        className={`rounded-full p-1.5 text-white ${variant}`}
                         onClick={(e) => {
                           item.onClick && item.onClick(e);
                         }}
@@ -564,7 +566,7 @@ export const Table: TableComponentProps = ({
                   ) : (
                     <button
                       type="button"
-                      className={`p-1.5 rounded-full text-white ${variant}`}
+                      className={`rounded-full p-1.5 text-white ${variant}`}
                       onClick={(e) => {
                         item.onClick && item.onClick(e);
                       }}
@@ -580,7 +582,7 @@ export const Table: TableComponentProps = ({
               >
                 <button
                   type="button"
-                  className="p-1.5 rounded-full bg-primary text-white hover:bg-primary-dark"
+                  className="rounded-full bg-primary p-1.5 text-white hover:bg-primary-dark"
                   onClick={(e) => {
                     options?.toolbar?.addData?.onClick &&
                       options?.toolbar?.addData?.onClick(e);
@@ -601,7 +603,7 @@ export const Table: TableComponentProps = ({
                   >
                     <button
                       type="button"
-                      className="px-2 py-2 rounded-full hover:bg-secondary-light"
+                      className="rounded-full px-2 py-2 hover:bg-secondary-light"
                     >
                       <Icon icon="mage:filter" className="text-xl" />
                     </button>
@@ -626,7 +628,9 @@ export const Table: TableComponentProps = ({
                         <Form.Checkbox
                           options={{ disableHover: true }}
                           label={item.title}
-                          checked={!excludedColumn?.includes(item.key)}
+                          checked={
+                            !excludedColumn?.includes(item.key) ? true : false
+                          }
                           readOnly
                         />
                       </div>
@@ -682,17 +686,17 @@ export const Table: TableComponentProps = ({
       )}
       <div
         className={`flex flex-col overflow-auto ${height} ${
-          options?.border && "border rounded-md"
+          options?.border && "rounded-md border"
         }`}
       >
         <table
-          className="w-full divide-y text-sm overflow-x-auto"
+          className="w-full divide-y overflow-x-auto text-sm"
           cellPadding={0}
         >
           <thead className="sticky top-0 z-10">
             <tr>
               {checkbox && (
-                <th className="sticky left-0 w-8 px-4 py-2 bg-secondary-bg">
+                <th className="sticky left-0 w-8 bg-secondary-bg px-4 py-2">
                   <div className="flex flex-col">
                     <Form.Checkbox
                       options={{ disableHover: true }}
@@ -703,6 +707,8 @@ export const Table: TableComponentProps = ({
                             return selectedItem.id === item.id;
                           });
                         })?.length === filteredData?.length
+                          ? true
+                          : false
                       }
                       onChange={(e) => {
                         if (
@@ -742,7 +748,7 @@ export const Table: TableComponentProps = ({
                       <div className="invisible w-0 overflow-hidden">
                         <input
                           type="search"
-                          className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
+                          className="w-full border-x-0 border-b border-t-0 border-default bg-secondary-bg px-0 pb-0.5 pt-0 text-sm font-normal placeholder:translate-x-0 placeholder:text-silent placeholder:duration-300 focus:border-primary-dark focus:outline-none focus:ring-0 focus:placeholder:translate-x-1 disabled:bg-secondary-light disabled:text-disabled [&::-webkit-search-cancel-button]:appearance-none"
                         />
                       </div>
                     )}
@@ -750,14 +756,14 @@ export const Table: TableComponentProps = ({
                 </th>
               )}
               {!options?.hideNumberColumn && (
-                <th className="sticky left-0 z-10 w-8 px-4 py-2 bg-secondary-bg font-medium text-center whitespace-nowrap">
+                <th className="sticky left-0 z-10 w-8 whitespace-nowrap bg-secondary-bg px-4 py-2 text-center font-medium">
                   <div className="flex flex-col">
                     <span>No.</span>
                     {options?.toolbar?.columnSearch?.show !== false && (
                       <div className="invisible w-0 overflow-hidden">
                         <input
                           type="search"
-                          className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
+                          className="w-full border-x-0 border-b border-t-0 border-default bg-secondary-bg px-0 pb-0.5 pt-0 text-sm font-normal placeholder:translate-x-0 placeholder:text-silent placeholder:duration-300 focus:border-primary-dark focus:outline-none focus:ring-0 focus:placeholder:translate-x-1 disabled:bg-secondary-light disabled:text-disabled [&::-webkit-search-cancel-button]:appearance-none"
                         />
                       </div>
                     )}
@@ -767,14 +773,14 @@ export const Table: TableComponentProps = ({
               {headerArr}
               {actionColumn &&
                 React.Children.toArray(actionColumn()).length !== 0 && (
-                  <th className="sticky right-0 w-8 px-4 py-2 z-10 bg-secondary-bg font-medium text-center whitespace-nowrap">
+                  <th className="sticky right-0 z-10 w-8 whitespace-nowrap bg-secondary-bg px-4 py-2 text-center font-medium">
                     <div className="flex flex-col">
                       <span>Actions</span>
                       {options?.toolbar?.columnSearch?.show !== false && (
                         <div className="invisible w-0 overflow-hidden">
                           <input
                             type="search"
-                            className="w-full px-0 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled"
+                            className="w-full border-x-0 border-b border-t-0 border-default bg-secondary-bg px-0 pb-0.5 pt-0 text-sm font-normal placeholder:translate-x-0 placeholder:text-silent placeholder:duration-300 focus:border-primary-dark focus:outline-none focus:ring-0 focus:placeholder:translate-x-1 disabled:bg-secondary-light disabled:text-disabled [&::-webkit-search-cancel-button]:appearance-none"
                           />
                         </div>
                       )}
@@ -788,11 +794,11 @@ export const Table: TableComponentProps = ({
           </tbody>
         </table>
         {(loading || !filteredData || filteredData.length === 0) && (
-          <div className="flex justify-center items-center px-4 py-1.5 h-full bg-secondary-bg text-center whitespace-nowrap">
+          <div className="flex h-full items-center justify-center whitespace-nowrap bg-secondary-bg px-4 py-1.5 text-center">
             {loading ? (
               <Icon
                 icon="mingcute:loading-fill"
-                className="text-3xl text-primary animate-spin"
+                className="animate-spin text-3xl text-primary"
               />
             ) : (
               <span>No data found</span>
@@ -801,8 +807,8 @@ export const Table: TableComponentProps = ({
         )}
       </div>
       {options?.toolbar?.pagination?.show !== false && (
-        <div className="flex justify-between items-end gap-2 w-full h-fit">
-          <div className="hidden md:block !text-sm">
+        <div className="flex h-fit w-full items-end justify-between gap-2">
+          <div className="hidden !text-sm md:block">
             <Form.Select
               options={{
                 width: "fit",
@@ -822,7 +828,7 @@ export const Table: TableComponentProps = ({
               }}
             />
           </div>
-          <div className="block md:hidden w-36 !text-sm">
+          <div className="block w-36 !text-sm md:hidden">
             <Form.Select
               options={{
                 width: "fit",
@@ -842,7 +848,7 @@ export const Table: TableComponentProps = ({
             />
           </div>
           {filteredData && filteredData.length !== 0 && (
-            <span className="hidden lg:block text-sm text-disabled">{`Showing ${
+            <span className="hidden text-sm text-disabled lg:block">{`Showing ${
               (page - 1) * maxRow + 1
             } to ${
               page * maxRow > filteredData?.length
@@ -853,7 +859,7 @@ export const Table: TableComponentProps = ({
           <div className="flex items-center gap-2 text-xs">
             <button
               type="button"
-              className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
+              className="flex h-9 min-w-9 items-center justify-center rounded-md border bg-secondary-bg hover:bg-secondary-light disabled:pointer-events-none disabled:bg-secondary-light disabled:text-disabled"
               disabled={page === 1}
               onClick={() => {
                 setPage(1);
@@ -863,7 +869,7 @@ export const Table: TableComponentProps = ({
             </button>
             <button
               type="button"
-              className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
+              className="hidden h-9 min-w-9 items-center justify-center rounded-md border bg-secondary-bg hover:bg-secondary-light disabled:pointer-events-none disabled:bg-secondary-light disabled:text-disabled md:flex"
               disabled={page === 1}
               onClick={() => {
                 setPage((prev) => prev - 1);
@@ -873,7 +879,7 @@ export const Table: TableComponentProps = ({
             </button>
             <div
               ref={paginationRef}
-              className="flex gap-2 max-w-20 xl:max-w-[124px] overflow-auto [&::-webkit-scrollbar]:hidden"
+              className="flex max-w-20 gap-2 overflow-auto xl:max-w-[124px] [&::-webkit-scrollbar]:hidden"
             >
               {Array.from({
                 length: Math.ceil(filteredData?.length / maxRow),
@@ -883,7 +889,7 @@ export const Table: TableComponentProps = ({
                     key={index}
                     id={`pagination-page-${index}`}
                     type="button"
-                    className="flex justify-center items-center min-w-9 h-9 border rounded-md select-none hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
+                    className="flex h-9 min-w-9 select-none items-center justify-center rounded-md border hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
                     disabled={page === index + 1}
                     onClick={() => {
                       setPage(index + 1);
@@ -896,7 +902,7 @@ export const Table: TableComponentProps = ({
             </div>
             <button
               type="button"
-              className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
+              className="hidden h-9 min-w-9 items-center justify-center rounded-md border bg-secondary-bg hover:bg-secondary-light disabled:pointer-events-none disabled:bg-secondary-light disabled:text-disabled md:flex"
               disabled={filteredData?.length <= page * maxRow}
               onClick={() => {
                 setPage((prev) => prev + 1);
@@ -906,7 +912,7 @@ export const Table: TableComponentProps = ({
             </button>
             <button
               type="button"
-              className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-disabled disabled:pointer-events-none"
+              className="flex h-9 min-w-9 items-center justify-center rounded-md border bg-secondary-bg hover:bg-secondary-light disabled:pointer-events-none disabled:bg-secondary-light disabled:text-disabled"
               disabled={filteredData?.length <= page * maxRow}
               onClick={() => {
                 setPage(Math.ceil(filteredData?.length / maxRow));

package/src/components/tooltip/index.tsx

@@ -1,6 +1,6 @@
 "use client";
-import React from "react";
-import { Tooltip as Tp } from "flowbite-react";
+import React, { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
 
 interface TooltipProps {
   children: React.ReactNode;
@@ -16,23 +16,227 @@ export const Tooltip: React.FC<TooltipProps> = ({
   content,
   options,
 }) => {
+  const [isRendered, setIsRendered] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState<"left" | "right" | "top" | "bottom">(
+    options?.position || "right"
+  );
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const [wrapperComponent, setWrapperComponent] = useState<DOMRect | null>(
+    null
+  );
+  const [tooltipComponent, setTooltipComponent] = useState<DOMRect | null>(
+    null
+  );
+
+  useEffect(() => {
+    setIsRendered(true);
+
+    document.addEventListener("mousemove", (e) => {
+      if (tooltipRef.current && wrapperRef.current) {
+        if (
+          !tooltipRef.current.contains(e.target as Node) &&
+          !wrapperRef.current.contains(e.target as Node)
+        ) {
+          setVisible(false);
+        }
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    const handlePosition = () => {
+      if (wrapperRef.current && tooltipRef.current) {
+        const tooltipRect = tooltipRef.current.getBoundingClientRect();
+
+        if (tooltipRect.right + 40 > window.innerWidth) {
+          setPosition("left");
+        } else if (tooltipRect.left + 40 < 0) {
+          setPosition("right");
+        } else if (tooltipRect.bottom > window.innerHeight) {
+          setPosition("top");
+        } else if (tooltipRect.top < 0) {
+          setPosition("bottom");
+        }
+      }
+    };
+
+    if (visible) {
+      handlePosition();
+      window.addEventListener("resize", handlePosition);
+    }
+
+    return () => {
+      window.removeEventListener("resize", handlePosition);
+    };
+  }, [visible, content]);
+
+  useEffect(() => {
+    let animationFrameId: number;
+
+    const updatePosition = () => {
+      if (!wrapperRef.current || !tooltipRef.current) return;
+
+      setWrapperComponent(wrapperRef.current.getBoundingClientRect());
+      setTooltipComponent(tooltipRef.current.getBoundingClientRect());
+
+      animationFrameId = requestAnimationFrame(updatePosition);
+    };
+
+    animationFrameId = requestAnimationFrame(updatePosition);
+
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [visible]);
+
+  const getTooltipPosition = () => {
+    if (wrapperComponent && tooltipComponent) {
+      switch (position) {
+        case "left":
+          return {
+            top:
+              wrapperComponent.top +
+              wrapperComponent.height / 2 -
+              tooltipComponent.height / 2,
+            left: wrapperComponent.left - tooltipComponent.width,
+          };
+        case "right":
+          return {
+            top:
+              wrapperComponent.top +
+              wrapperComponent.height / 2 -
+              tooltipComponent.height / 2,
+            left: wrapperComponent.right,
+          };
+        case "top":
+          return {
+            top: wrapperComponent.top - tooltipComponent.height,
+            left:
+              wrapperComponent.left +
+              wrapperComponent.width / 2 -
+              tooltipComponent.width / 2,
+          };
+        case "bottom":
+          return {
+            top: wrapperComponent.bottom,
+            left:
+              wrapperComponent.left +
+              wrapperComponent.width / 2 -
+              tooltipComponent.width / 2,
+          };
+        default:
+          return {
+            top:
+              wrapperComponent.top +
+              wrapperComponent.height / 2 -
+              tooltipComponent.height / 2,
+            left: wrapperComponent.right,
+          };
+      }
+    }
+  };
+
+  const getTooltipArrowPosition = () => {
+    if (wrapperComponent && tooltipComponent) {
+      switch (position) {
+        case "left":
+          return {
+            width: "0px",
+            height: "0px",
+            borderStyle: "solid",
+            borderWidth: "6px",
+            borderColor: "transparent transparent transparent black",
+            opacity: "0.80",
+          };
+        case "right":
+          return {
+            width: "0px",
+            height: "0px",
+            borderStyle: "solid",
+            borderWidth: "6px",
+            borderColor: "transparent black transparent transparent",
+            opacity: "0.80",
+          };
+        case "top":
+          return {
+            width: "0px",
+            height: "0px",
+            borderStyle: "solid",
+            borderWidth: "6px",
+            borderColor: "black transparent transparent transparent",
+            opacity: "0.80",
+          };
+        case "bottom":
+          return {
+            width: "0px",
+            height: "0px",
+            borderStyle: "solid",
+            borderWidth: "6px",
+            borderColor: "transparent transparent black transparent",
+            opacity: "0.80",
+          };
+        default:
+          return {
+            width: "0px",
+            height: "0px",
+            borderStyle: "solid",
+            borderWidth: "6px",
+            borderColor: "transparent black transparent transparent",
+            opacity: "0.80",
+          };
+      }
+    }
+  };
+
   return (
-    <Tp
-      content={content}
-      className={`z-50 max-w-[75dvw] md:max-w-96 px-3 py-1.5 rounded-md bg-black/85 text-sm text-wrap font-normal ${
-        !options?.enableHover && "pointer-events-none"
-      }`}
-      style="dark"
-      placement={options?.position || "right"}
-      theme={{
-        arrow: {
-          base: "absolute z-10 h-2 w-2 rotate-45",
-          style: { dark: "bg-black/85" },
-        },
-      }}
-      animation="duration-200"
+    <div
+      ref={wrapperRef}
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
     >
       {children}
-    </Tp>
+      {isRendered &&
+        position &&
+        createPortal(
+          <div
+            ref={tooltipRef}
+            className={`absolute z-50 max-w-dvw max-h-dvh overflow-hidden duration-200 transition-opacity ${
+              visible ? "opacity-100" : "opacity-0 pointer-events-none"
+            } ${options?.enableHover ? "" : "pointer-events-none"}`}
+            style={getTooltipPosition()}
+          >
+            {position === "bottom" && (
+              <div className="flex justify-center">
+                <div style={getTooltipArrowPosition()}></div>
+              </div>
+            )}
+            <div className="flex items-center">
+              {position === "right" && (
+                <div className="flex justify-center">
+                  <div style={getTooltipArrowPosition()}></div>
+                </div>
+              )}
+              <div className="px-3 py-1.5 rounded-md bg-black/80">
+                <div className="max-w-[75dvw] md:max-w-96 max-h-[50dvh] text-sm text-white overflow-hidden">
+                  {content}
+                </div>
+              </div>
+              {position === "left" && (
+                <div className="flex justify-center">
+                  <div style={getTooltipArrowPosition()}></div>
+                </div>
+              )}
+            </div>
+            {position === "top" && (
+              <div className="flex justify-center">
+                <div style={getTooltipArrowPosition()}></div>
+              </div>
+            )}
+          </div>,
+          document.body
+        )}
+    </div>
   );
 };