feat(action): add action attribute to control display of tooltip

Author: dysfunc

README.md

@@ -42,6 +42,7 @@ Checkout out my <u use:tooltip={{ content: 'Hello World!' }}>tooltip</u>
 ### Props
 | Prop         | Description                                                         | Value                                           |
 | :----------- | :------------------------------------------------------------------ | :---------------------------------------------- |
+| action       | The action that triggers the tooltip (hover | click)                | `string` (default: `hover`)                     |
 | animation    | The animation to apply to the tooltip                               | `string` (default: ``)                          |
 | arrow        | If `false`, the tooltip arrow will not be shown.                    | `boolean` (default: `true`)                     |
 | autoPosition | Adjust tooltip position if viewport clipping occurs                 | `string` (default: `false`)                     |

docs/src/App.svelte

@@ -12,12 +12,12 @@
 
 	<hr />
 
-	<h2>Examples using action</h2>
+ 	<h2>Examples using action</h2>
 
 	<div class="example">
-		<p>This tooltip should appear on the <u title="hello world!" use:tooltip>top</u> and use the content in the <code>title</code> attribute.</p>
+		<p>This tooltip should appear on the <u title="hello world!" action="click"  use:tooltip>top</u> when clicked. The content for the tooltip is provided by the <code>title</code> attribute.</p>
 
-    <Prism code={'<u title="hello world!" use:tooltip>top</u>'} />
+    <Prism code={'<u title="hello world!" action="click" use:tooltip>top</u>'} />
   </div>
 
 	<div class="example">
@@ -27,9 +27,9 @@
   </div>
 
 	<div class="example">
-		<p>This tooltip should appear to the <b use:tooltip={{ content: 'Whoa! I appear to the right.', position: 'right', theme: 'tooltip-theme' }}>right</b>.</p>
+		<p>This tooltip should appear to the <b use:tooltip={{ content: 'Whoa! I appear to the right.', action: 'click', position: 'right', theme: 'tooltip-theme' }}>right</b> when clicked.</p>
 
-    <Prism code={"<b use:tooltip={{ content: 'Whoa! I appear to the right.', position: 'right', theme: 'tooltip-theme' }}>right</b>"} />
+    <Prism code={"<b use:tooltip={{ content: 'Whoa! I appear to the right.', position: 'right', action: 'click', theme: 'tooltip-theme' }}>right</b>"} />
 
     <p>This is also demonstrates the use of the <code>theme</code> property:</p>
 
@@ -83,7 +83,7 @@
 	</div>
 
 	<div class="example">
-		This tooltip should appear on the <Tooltip content="<b>Tooltip Top</b><p>This is an example of using HTML and content wrapping.</p>" position="top" animation="slide" arrow={false}><i>top</i>.</Tooltip>
+		This tooltip should appear on the <Tooltip content="<b>Tooltip Top</b><p>This is an example of using HTML and content wrapping.</p>" action="click" position="top" animation="slide" arrow={false}><i>top</i></Tooltip> when clicked.
 	</div>
 
 	<div class="example">
@@ -92,6 +92,7 @@
       <Tooltip
         content="Whoa! I appear to the right."
         position="right"
+        action="click"
         theme="tooltip-theme">
         <b>right</b>.
       </Tooltip>
@@ -100,6 +101,7 @@
 <Tooltip
   content="Whoa! I appear to the right."
   position="right"
+  action="click"
   theme="tooltip-theme">
   <b>right</b>
 </Tooltip>

src/action-tooltip.svelte

@@ -3,6 +3,7 @@
   import { formatVariableKey, getMinWidth, isInViewport } from './helpers';
   import { inverse } from './constants';
 
+  export let action = 'hover';
   export let content = '';
   export let align = 'left';
   export let position = 'top';
@@ -24,7 +25,7 @@
 
     if (ref !== null) {
       if (isComponent && !component) {
-        component = new content.component({ target: ref, props: content.props });
+        component = new content.component({ target: ref, props: { action, ...content.props } });
       }
 
       minWidth = getMinWidth(ref, maxWidth);

src/action.js

@@ -4,6 +4,7 @@ export const tooltip = (element, props) => {
 
 	let component = null;
 	let title = element.getAttribute('title');
+	let action = props?.action || element.getAttribute('action') || 'hover';
 
 	if (title) {
 		element.removeAttribute('title');
@@ -14,6 +15,14 @@ export const tooltip = (element, props) => {
 		}
 	}
 
+	const onClick = () => {
+		if (component) {
+			onMouseLeave();
+		} else {
+			onMouseEnter();
+		}
+	};
+
 	const onMouseEnter = () => {
 		if (!component) {
 			component = new Tooltip({
@@ -30,14 +39,34 @@ export const tooltip = (element, props) => {
 		}
 	};
 
-	element.addEventListener('mouseenter', onMouseEnter);
-	element.addEventListener('mouseleave', onMouseLeave);
+	const addListeners = () => {
+		if (element !== null) {
+			removeListeners();
+
+			if (action === 'click') {
+				element.addEventListener('click', onClick);
+			} else {
+				element.addEventListener('mouseenter', onMouseEnter);
+				element.addEventListener('mouseleave', onMouseLeave);
+			}
+		}
+	}
+
+	const removeListeners = () => {
+		if (element !== null) {
+			element.removeEventListener('click', onClick);
+			element.removeEventListener('mouseenter', onMouseEnter);
+			element.removeEventListener('mouseleave', onMouseLeave);
+		}
+	};
+
+	addListeners();
+
 	element.style.position = 'relative';
 
 	return {
 		destroy() {
-			element.removeEventListener('mouseenter', onMouseEnter);
-			element.removeEventListener('mouseleave', onMouseLeave);
+			removeListeners();
 
 			if (title) {
 				element.setAttribute('title', title);

src/tooltip.svelte

@@ -5,14 +5,15 @@
   import { formatVariableKey, getMinWidth, isInViewport } from './helpers';
   import { inverse } from './constants';
 
+  export let action = 'hover';
   export let content = '';
   export let align = 'left';
   export let position = 'top';
   export let maxWidth = 200;
   /**
    * @type {{ [x: string]: any; } | null}
    */
-   export let style = null;
+  export let style = null;
   export let theme = '';
   export let animation = '';
   export let arrow = true;
@@ -42,6 +43,14 @@
    */
   let timer = null;
 
+  const onClick = () => {
+    if (show) {
+      onMouseLeave();
+    } else {
+      onMouseEnter();
+    }
+  };
+
   const onMouseEnter = () => {
     const delay = animation ? 200 : 0;
 
@@ -68,11 +77,31 @@
     }
   };
 
-  onMount(() => {
+  const addListeners = () => {
     if (containerRef !== null) {
-      containerRef.addEventListener('mouseenter', onMouseEnter);
-      containerRef.addEventListener('mouseleave', onMouseLeave);
+      removeListeners();
+
+      if (action === 'click') {
+        containerRef.addEventListener('click', onClick);
+      }
+
+      if (action === 'hover') {
+        containerRef.addEventListener('mouseenter', onMouseEnter);
+        containerRef.addEventListener('mouseleave', onMouseLeave);
+      }
     }
+  }
+
+  const removeListeners = () => {
+    if (containerRef !== null) {
+      containerRef.removeEventListener('click', onClick);
+      containerRef.removeEventListener('mouseenter', onMouseEnter);
+      containerRef.removeEventListener('mouseleave', onMouseLeave);
+    }
+  };
+
+  onMount(() => {
+    addListeners();
 
     if (tooltipRef !== null) {
       if (isComponent && !component) {
@@ -103,13 +132,11 @@
       component = null;
     }
 
-    if (containerRef !== null) {
-      containerRef.removeEventListener('mouseenter', onMouseEnter);
-      containerRef.removeEventListener('mouseleave', onMouseLeave);
-    }
+    removeListeners();
   });
 
   $: isComponent = typeof content === 'object';
+  $: action, addListeners();
 </script>
 
 {#if content}