feat: add trigger by click

wetix · Mar 17, 2021 · 0ecc720 · 0ecc720
1 parent dc68151
commit 0ecc720
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 28 deletions.
diff --git a/components/tooltip/src/Tooltip.svelte b/components/tooltip/src/Tooltip.svelte
@@ -10,7 +10,8 @@
   export let html = false;
   export let placement = "top";
   export let target: null | HTMLElement = null;
-  // export let trigger: TooltipTrigger[] = ["mouseenter", "click"];
+  export let trigger: TooltipTrigger[] = ["mouseenter", "click"];
+  export let timeout = 2000;
 
   const hasSlot = Object.keys($$slots).length > 0;
   let clientWidth = 0;
@@ -111,17 +112,24 @@
       parent.insertBefore(firstChild, node);
       parent.removeChild(node);
 
-      firstChild.addEventListener("click", (e: Event) => {
-        setPos(<HTMLElement>e.currentTarget);
-        hide = !hide;
-      });
-      firstChild.addEventListener("mouseenter", (e: Event) => {
-        setPos(<HTMLElement>e.currentTarget);
-        hide = false;
-      });
-      firstChild.addEventListener("mouseleave", () => {
-        hide = true;
-      });
+      if (trigger.includes("click")) {
+        firstChild.addEventListener("click", (e: Event) => {
+          setPos(<HTMLElement>e.currentTarget);
+          hide = false;
+          setTimeout(() => {
+            hide = true;
+          }, timeout);
+        });
+      }
+      if (trigger.includes("mouseenter")) {
+        firstChild.addEventListener("mouseenter", (e: Event) => {
+          setPos(<HTMLElement>e.currentTarget);
+          hide = false;
+        });
+        firstChild.addEventListener("mouseleave", () => {
+          hide = true;
+        });
+      }
     }
   };
 </script>

diff --git a/components/tooltip/src/index.ts b/components/tooltip/src/index.ts
@@ -5,7 +5,7 @@ import type { TooltipProps } from "../types/tooltip";
 const attrName = "data-tooltip";
 
 const tooltip = (node: Node, params: Partial<TooltipProps> = {}) => {
-  // const { trigger = ["mouseenter"] } = params;
+  const { trigger = ["mouseenter"], timeout = 2000 } = params;
 
   let comp: null | Tooltip = null;
 
@@ -20,20 +20,39 @@ const tooltip = (node: Node, params: Partial<TooltipProps> = {}) => {
     comp = null;
   };
 
-  node.addEventListener("mouseenter", (e: Event) => {
-    if (!comp) {
-      comp = new Tooltip({
-        target: document.body,
-        intro: true,
-        props: {
-          ...params,
-          target: node,
-          text: <string>target.getAttribute(attrName),
-        },
-      });
-    }
-    node.addEventListener("mouseleave", onDestroy);
-  });
+  if (trigger.includes("mouseenter")) {
+    node.addEventListener("mouseenter", (e: Event) => {
+      if (!comp) {
+        comp = new Tooltip({
+          target: document.body,
+          intro: true,
+          props: {
+            ...params,
+            target: node,
+            text: <string>target.getAttribute(attrName),
+          },
+        });
+      }
+      node.addEventListener("mouseleave", onDestroy);
+    });
+  }
+
+  if (trigger.includes("click")) {
+    node.addEventListener("click", (e: Event) => {
+      if (!comp) {
+        comp = new Tooltip({
+          target: document.body,
+          intro: true,
+          props: {
+            ...params,
+            target: node,
+            text: <string>target.getAttribute(attrName),
+          },
+        });
+        setTimeout(onDestroy, timeout);
+      }
+    });
+  }
 
   return {
     destroy: onDestroy,

diff --git a/components/tooltip/types/tooltip.d.ts b/components/tooltip/types/tooltip.d.ts
@@ -18,6 +18,7 @@ export interface TooltipProps {
   text: string;
   html?: boolean;
   trigger?: TooltipTrigger[];
+  timeout?: number;
 }
 
 interface TooltipEvents {}

diff --git a/src/App.svelte b/src/App.svelte
@@ -440,7 +440,7 @@
 
   <!-- <Badge count={100} /><Badge count={98} /> -->
   <ComponentDetail hint="@responsive-ui/header" block={true}>
-    <Tooltip text="Responsive UI">
+    <Tooltip trigger={["click"]} text="Responsive UI">
       <Header label="Responsive UI" />
     </Tooltip>
   </ComponentDetail>
@@ -520,6 +520,13 @@
           >Hover me for Tooltip on bottomRight</span
         >
       </Column>
+      <Column span={8}>
+        <span
+          title="Click me for Tooltip"
+          use:tooltip={{ placement: "bottom-right", trigger: ["click"] }}
+          >Click me for Tooltip on bottomRight</span
+        >
+      </Column>
     </Row>
   </div>