From c175394dfbe2eb39dac27ce951201246308a0ca6 Mon Sep 17 00:00:00 2001
From: Szymon Dzialowski <szymon.dzialowski@gmail.com>
Date: Tue, 10 Dec 2024 01:17:04 +0000
Subject: [PATCH] OnToggleClick [q]

---
 pages/js/popper/popper.entry.js | 53 +++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/pages/js/popper/popper.entry.js b/pages/js/popper/popper.entry.js
index 7dde58d4..8984a665 100644
--- a/pages/js/popper/popper.entry.js
+++ b/pages/js/popper/popper.entry.js
@@ -38,9 +38,24 @@ function useTooltipOnHover(generateOptions, defautShow = false) {
     },
   };
 }
+/**
+ * Extended hook for toggle click
+ */
+function useTooltipOnToggleClick(generateOptions, defautShow = false) {
+  const props = useTooltip(generateOptions);
+
+  const [show, setShow] = useState(defautShow);
+
+  return {
+    ...props,
+    show,
+    events: {
+      onClick: () => setShow((show) => !show),
+    },
+  };
+}
 
 const AlwaysShow = () => {
-  //   const [setReferenceElement, setPopperElement, setArrowElement, attributes, styles] = useTooltip((arrowElement) => ({
   const tooltip = useTooltip((arrowElement) => ({
     modifiers: [
       {
@@ -73,7 +88,6 @@ const AlwaysShow = () => {
 };
 
 const OnHover = () => {
-  //   const [setReferenceElement, setPopperElement, setArrowElement, attributes, styles, show, events] = useTooltipOnHover(
   const tooltip = useTooltipOnHover((arrowElement) => ({
     modifiers: [
       {
@@ -107,6 +121,40 @@ const OnHover = () => {
   );
 };
 
+const OnToggleClick = () => {
+  const tooltip = useTooltipOnToggleClick((arrowElement) => ({
+    modifiers: [
+      {
+        name: "offset",
+        options: {
+          offset: [0, 8],
+          element: arrowElement,
+        },
+      },
+    ],
+  }));
+
+  return (
+    <>
+      <button type="button" ref={tooltip.setReferenceElement} {...tooltip.events}>
+        On hover target
+      </button>
+
+      {tooltip.show && (
+        <div
+          ref={tooltip.setPopperElement}
+          style={tooltip.styles.popper}
+          className="tooltipstyle show"
+          {...tooltip.attributes.popper}
+        >
+          On hover
+          <div ref={tooltip.setArrowElement} style={tooltip.styles.arrow} className="arrow" data-popper-arrow />
+        </div>
+      )}
+    </>
+  );
+};
+
 function Main() {
   const [length, setLength] = useState(1);
 
@@ -119,6 +167,7 @@ function Main() {
         <div key={i}>
           <AlwaysShow />
           <OnHover />
+          <OnToggleClick />
         </div>
       ))}
     </div>