New Tasks

2024-06-25 23:51:51 +01:00
parent ca57235999
commit 967aec7bd1
117 changed files with 9108 additions and 46 deletions
@@ -0,0 +1,61 @@
+import React, { useId } from "react";
+import { Tooltip as ReactTooltip } from "react-tooltip";
+import "./MkdPopover.css";
+
+const MkdPopover = ({
+  display,
+  className,
+  children,
+  tooltipClasses,
+  place = "bottom",
+  openOnClick = true,
+  zIndex = 99999,
+  onPopoverStateChange,
+  backgroundColor = "#fff",
+  textColor = "#000",
+}) => {
+  const tooltipId = useId();
+  const handleTooltipShow = () => {
+    if (onPopoverStateChange) {
+      onPopoverStateChange(true);
+    }
+  };
+
+  const handleTooltipHide = () => {
+    if (onPopoverStateChange) {
+      onPopoverStateChange(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="App">
+        <button
+          type="button"
+          data-tooltip-id={tooltipId}
+          className={`${className}`}
+        >
+          {display ? display : null}
+          {/* <AlertCircle className="rotate-180" /> */}
+        </button>
+      </div>
+      <ReactTooltip
+        // globalCloseEvents={{ scroll: true }}
+        id={tooltipId}
+        openOnClick={openOnClick}
+        style={{ backgroundColor, color: textColor, zIndex: zIndex }}
+        className={`z-[${zIndex}] ${tooltipClasses} !shadow-md`}
+        clickable
+        place={place}
+        effect="solid"
+        afterShow={handleTooltipShow}
+        afterHide={handleTooltipHide}
+        // getTextColor={() => textColor}
+      >
+        {children}
+      </ReactTooltip>
+    </>
+  );
+};
+
+export default MkdPopover;