New Tasks

src/components/MkdPopover/MkdPopover.css

@@ -0,0 +1,10 @@
+/* PopoverOnClick.css */
+
+/* Customize the appearance of the tooltip */
+/* .tooltip {
+  background-color: white !important;
+  color: #fff;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+} */

src/components/MkdPopover/MkdPopover.jsx

@@ -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;

src/components/MkdPopover/MkdPopover.module.css

@@ -0,0 +1,47 @@
+.button {
+  position: relative;
+  border: none;
+  color: #ffffff;
+  text-align: center;
+  -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+  text-decoration: none;
+  overflow: hidden;
+  cursor: pointer;
+}
+.button:after {
+  content: "";
+  background: #4f46e5;
+  display: block;
+  position: absolute;
+  padding-top: 300%;
+  padding-left: 350%;
+  margin-left: -20px !important;
+  margin-top: -120%;
+  opacity: 0;
+  transition: all 0.8s;
+}
+
+.button:active:after {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+  transition: 0s;
+}
+.tip {
+  position: absolute;
+  top: anchor(bottom);
+  left: anchor(50%);
+}
+
+/* PopoverOnClick.css */
+
+/* Customize the appearance of the tooltip */
+.tooltip {
+  background-color: #333;
+  color: #fff;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  /* Add any other styles you need */
+}

src/components/MkdPopover/index.js

@@ -0,0 +1,3 @@
+import { lazy } from "react";
+
+export const MkdPopover = lazy(() => import("./MkdPopover"));