From bf4f4dea26447121a859eca209746f81c6c1c1f8 Mon Sep 17 00:00:00 2001
From: Kieran Boyle <norcal.kieran@gmail.com>
Date: Tue, 12 Sep 2023 08:23:47 -0700
Subject: [PATCH 1/6] fix(empty-state): add content check to prevent empty
 tooltips from appearing.

---
 docs/package-lock.json | 18 +++++++++++-------
 package-lock.json      |  4 ++--
 package.json           |  2 +-
 src/tooltip.svelte     | 30 +++++++++++++++++-------------
 4 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/docs/package-lock.json b/docs/package-lock.json
index 62fa543..e65b720 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -18,7 +18,7 @@
     },
     "..": {
       "name": "@svelte-plugins/tooltips",
-      "version": "0.1.6",
+      "version": "0.1.7",
       "dev": true,
       "license": "MIT",
       "devDependencies": {
@@ -299,9 +299,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001380",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001380.tgz",
-      "integrity": "sha512-OO+pPubxx16lkI7TVrbFpde8XHz66SMwstl1YWpg6uMGw56XnhYVwtPIjvX4kYpzwMwQKr4DDce394E03dQPGg==",
+      "version": "1.0.30001533",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001533.tgz",
+      "integrity": "sha512-9aY/b05NKU4Yl2sbcJhn4A7MsGwR1EPfW/nrqsnqVA0Oq50wpmPaGI+R1Z0UKlUl96oxUkGEOILWtOHck0eCWw==",
       "dev": true,
       "funding": [
         {
@@ -311,6 +311,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -1736,9 +1740,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001380",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001380.tgz",
-      "integrity": "sha512-OO+pPubxx16lkI7TVrbFpde8XHz66SMwstl1YWpg6uMGw56XnhYVwtPIjvX4kYpzwMwQKr4DDce394E03dQPGg==",
+      "version": "1.0.30001533",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001533.tgz",
+      "integrity": "sha512-9aY/b05NKU4Yl2sbcJhn4A7MsGwR1EPfW/nrqsnqVA0Oq50wpmPaGI+R1Z0UKlUl96oxUkGEOILWtOHck0eCWw==",
       "dev": true
     },
     "chokidar": {
diff --git a/package-lock.json b/package-lock.json
index c555d5b..3bb415c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@svelte-plugins/tooltips",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@svelte-plugins/tooltips",
-      "version": "0.1.5",
+      "version": "0.1.6",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.13.1",
diff --git a/package.json b/package.json
index 0b450dc..ee92d26 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@svelte-plugins/tooltips",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "license": "MIT",
   "description": "A simple tooltip action and component designed for Svelte.",
   "author": "Kieran Boyle (https://github.com/dysfunc)",
diff --git a/src/tooltip.svelte b/src/tooltip.svelte
index 4919fb2..2137f42 100644
--- a/src/tooltip.svelte
+++ b/src/tooltip.svelte
@@ -89,20 +89,24 @@
   $: isComponent = typeof content === 'object';
 </script>
 
-<span bind:this={containerRef} class="tooltip-container">
+{#if content}
+  <span bind:this={containerRef} class="tooltip-container">
+    <slot />
+      <div
+        bind:this={tooltipRef}
+        class="tooltip animation-{animationEffect} {position} {theme}"
+        class:arrowless={!arrow}
+        class:show
+        style="min-width: {minWidth}px; max-width: {maxWidth}px; text-align: {align};"
+      >
+        {#if !isComponent}
+          {@html content}
+        {/if}
+      </div>
+    </span>
+{:else}
   <slot />
-  <div
-    bind:this={tooltipRef}
-    class="tooltip animation-{animationEffect} {position} {theme}"
-    class:arrowless={!arrow}
-    class:show
-    style="min-width: {minWidth}px; max-width: {maxWidth}px; text-align: {align};"
-  >
-    {#if !isComponent}
-      {@html content}
-    {/if}
-  </div>
-</span>
+{/if}
 
 <style>
   /*--------------------------*

From c3d39c60590fdf9ce0f84136fa7b9c8aca02b803 Mon Sep 17 00:00:00 2001
From: Kieran Boyle <norcal.kieran@gmail.com>
Date: Tue, 12 Sep 2023 09:21:57 -0700
Subject: [PATCH 2/6] refactor(types): add types definition file for component

---
 docs/package-lock.json  |   8 +-
 package-lock.json       | 479 +++++++++++++++++++++++++++++++++++++---
 package.json            |   5 +-
 src/index.d.ts          |   1 +
 src/tooltip.svelte      |  25 ++-
 src/tooltip.svelte.d.ts |  49 ++++
 tsconfig.json           |  18 ++
 7 files changed, 552 insertions(+), 33 deletions(-)
 create mode 100644 src/index.d.ts
 create mode 100644 src/tooltip.svelte.d.ts
 create mode 100644 tsconfig.json

diff --git a/docs/package-lock.json b/docs/package-lock.json
index e65b720..f30175a 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -49,7 +49,9 @@
         "rollup-plugin-svelte": "^7.1.0",
         "rollup-plugin-terser": "^7.0.2",
         "svelte": "^3.49.0",
-        "svelte-loader": "^3.0.0"
+        "svelte-check": "^3.5.1",
+        "svelte-loader": "^3.0.0",
+        "typescript": "^5.2.2"
       }
     },
     "node_modules/@esbuild/linux-loong64": {
@@ -1618,7 +1620,9 @@
         "rollup-plugin-svelte": "^7.1.0",
         "rollup-plugin-terser": "^7.0.2",
         "svelte": "^3.49.0",
-        "svelte-loader": "^3.0.0"
+        "svelte-check": "^3.5.1",
+        "svelte-loader": "^3.0.0",
+        "typescript": "^5.2.2"
       }
     },
     "@sveltejs/vite-plugin-svelte": {
diff --git a/package-lock.json b/package-lock.json
index 3bb415c..da7f7c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@svelte-plugins/tooltips",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@svelte-plugins/tooltips",
-      "version": "0.1.6",
+      "version": "0.1.7",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.13.1",
@@ -36,7 +36,9 @@
         "rollup-plugin-svelte": "^7.1.0",
         "rollup-plugin-terser": "^7.0.2",
         "svelte": "^3.49.0",
-        "svelte-loader": "^3.0.0"
+        "svelte-check": "^3.5.1",
+        "svelte-loader": "^3.0.0",
+        "typescript": "^5.2.2"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -2762,13 +2764,13 @@
       "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz",
-      "integrity": "sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==",
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
+      "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
     "node_modules/@nodelib/fs.scandir": {
@@ -3359,6 +3361,12 @@
       "integrity": "sha512-RI1L7N4JnW5gQw2spvL7Sllfuf1SaHdrZpCHiBlCXjIlufi1SMNnbu2teze3/QE67Fg2tBlH7W+mi4hVNk4p0A==",
       "dev": true
     },
+    "node_modules/@types/pug": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
+      "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
+      "dev": true
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4231,6 +4239,15 @@
         "node": "*"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/bindings": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
@@ -4305,6 +4322,15 @@
         "node-int64": "^0.4.0"
       }
     },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -4425,6 +4451,33 @@
         "node": ">=10"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -4879,6 +4932,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-indent": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+      "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -5032,6 +5094,12 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/es6-promise": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+      "integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
+      "dev": true
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -6478,6 +6546,18 @@
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
       "dev": true
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -9799,6 +9879,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -10550,6 +10651,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -10917,6 +11030,18 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dev": true,
+      "dependencies": {
+        "mri": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -10938,6 +11063,30 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sander": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
+      "integrity": "sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==",
+      "dev": true,
+      "dependencies": {
+        "es6-promise": "^3.1.2",
+        "graceful-fs": "^4.1.3",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.2"
+      }
+    },
+    "node_modules/sander/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
     "node_modules/sane": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz",
@@ -11633,6 +11782,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sorcery": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.0.tgz",
+      "integrity": "sha512-J69LQ22xrQB1cIFJhPfgtLuI6BpWRiWu1Y3vSsIwK/eAScqJxd/+CJlUuHQRdX2C9NGFamq+KqNywGgaThwfHw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.14",
+        "buffer-crc32": "^0.2.5",
+        "minimist": "^1.2.0",
+        "sander": "^0.5.0"
+      },
+      "bin": {
+        "sorcery": "bin/sorcery"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -12030,14 +12194,36 @@
       }
     },
     "node_modules/svelte": {
-      "version": "3.49.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
-      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
+      "version": "3.59.2",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.59.2.tgz",
+      "integrity": "sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==",
       "dev": true,
       "engines": {
         "node": ">= 8"
       }
     },
+    "node_modules/svelte-check": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.5.1.tgz",
+      "integrity": "sha512-+Zb4iHxAhdUtcUg/WJPRjlS1RJalIsWAe9Mz6G1zyznSs7dDkT7VUBdXc3q7Iwg49O/VrZgyJRvOJkjuBfKjFA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "chokidar": "^3.4.1",
+        "fast-glob": "^3.2.7",
+        "import-fresh": "^3.2.1",
+        "picocolors": "^1.0.0",
+        "sade": "^1.7.4",
+        "svelte-preprocess": "^5.0.4",
+        "typescript": "^5.0.3"
+      },
+      "bin": {
+        "svelte-check": "bin/svelte-check"
+      },
+      "peerDependencies": {
+        "svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0"
+      }
+    },
     "node_modules/svelte-dev-helper": {
       "version": "1.1.9",
       "resolved": "https://registry.npmjs.org/svelte-dev-helper/-/svelte-dev-helper-1.1.9.tgz",
@@ -12070,6 +12256,80 @@
         "svelte": ">3.0.0"
       }
     },
+    "node_modules/svelte-preprocess": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.4.tgz",
+      "integrity": "sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@types/pug": "^2.0.6",
+        "detect-indent": "^6.1.0",
+        "magic-string": "^0.27.0",
+        "sorcery": "^0.11.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 14.10.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.10.2",
+        "coffeescript": "^2.5.1",
+        "less": "^3.11.3 || ^4.0.0",
+        "postcss": "^7 || ^8",
+        "postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0",
+        "pug": "^3.0.0",
+        "sass": "^1.26.8",
+        "stylus": "^0.55.0",
+        "sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
+        "svelte": "^3.23.0 || ^4.0.0-next.0 || ^4.0.0",
+        "typescript": ">=3.9.5 || ^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "coffeescript": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "postcss-load-config": {
+          "optional": true
+        },
+        "pug": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/svelte-preprocess/node_modules/magic-string": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+      "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.13"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -12517,17 +12777,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
       "dev": true,
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
@@ -15059,13 +15318,13 @@
       "dev": true
     },
     "@jridgewell/trace-mapping": {
-      "version": "0.3.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz",
-      "integrity": "sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==",
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
+      "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
       "dev": true,
       "requires": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
     "@nodelib/fs.scandir": {
@@ -15540,6 +15799,12 @@
       "integrity": "sha512-RI1L7N4JnW5gQw2spvL7Sllfuf1SaHdrZpCHiBlCXjIlufi1SMNnbu2teze3/QE67Fg2tBlH7W+mi4hVNk4p0A==",
       "dev": true
     },
+    "@types/pug": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
+      "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
+      "dev": true
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -16226,6 +16491,12 @@
       "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
       "dev": true
     },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
     "bindings": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
@@ -16281,6 +16552,12 @@
         "node-int64": "^0.4.0"
       }
     },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true
+    },
     "buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -16364,6 +16641,22 @@
       "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
       "dev": true
     },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      }
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -16727,6 +17020,12 @@
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "dev": true
     },
+    "detect-indent": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+      "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+      "dev": true
+    },
     "detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -16849,6 +17148,12 @@
       "dev": true,
       "peer": true
     },
+    "es6-promise": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+      "integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
+      "dev": true
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -17948,6 +18253,15 @@
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
       "dev": true
     },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -20462,6 +20776,21 @@
         "is-extendable": "^1.0.1"
       }
     },
+    "mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.6"
+      }
+    },
+    "mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "dev": true
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -21036,6 +21365,15 @@
         }
       }
     },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -21311,6 +21649,15 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dev": true,
+      "requires": {
+        "mri": "^1.1.0"
+      }
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -21332,6 +21679,29 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sander": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
+      "integrity": "sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==",
+      "dev": true,
+      "requires": {
+        "es6-promise": "^3.1.2",
+        "graceful-fs": "^4.1.3",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.2"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
     "sane": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz",
@@ -21891,6 +22261,18 @@
         }
       }
     },
+    "sorcery": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.0.tgz",
+      "integrity": "sha512-J69LQ22xrQB1cIFJhPfgtLuI6BpWRiWu1Y3vSsIwK/eAScqJxd/+CJlUuHQRdX2C9NGFamq+KqNywGgaThwfHw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/sourcemap-codec": "^1.4.14",
+        "buffer-crc32": "^0.2.5",
+        "minimist": "^1.2.0",
+        "sander": "^0.5.0"
+      }
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -22208,11 +22590,27 @@
       "dev": true
     },
     "svelte": {
-      "version": "3.49.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
-      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
+      "version": "3.59.2",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.59.2.tgz",
+      "integrity": "sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==",
       "dev": true
     },
+    "svelte-check": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.5.1.tgz",
+      "integrity": "sha512-+Zb4iHxAhdUtcUg/WJPRjlS1RJalIsWAe9Mz6G1zyznSs7dDkT7VUBdXc3q7Iwg49O/VrZgyJRvOJkjuBfKjFA==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "chokidar": "^3.4.1",
+        "fast-glob": "^3.2.7",
+        "import-fresh": "^3.2.1",
+        "picocolors": "^1.0.0",
+        "sade": "^1.7.4",
+        "svelte-preprocess": "^5.0.4",
+        "typescript": "^5.0.3"
+      }
+    },
     "svelte-dev-helper": {
       "version": "1.1.9",
       "resolved": "https://registry.npmjs.org/svelte-dev-helper/-/svelte-dev-helper-1.1.9.tgz",
@@ -22237,6 +22635,30 @@
         "svelte-hmr": "^0.14.2"
       }
     },
+    "svelte-preprocess": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.4.tgz",
+      "integrity": "sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==",
+      "dev": true,
+      "requires": {
+        "@types/pug": "^2.0.6",
+        "detect-indent": "^6.1.0",
+        "magic-string": "^0.27.0",
+        "sorcery": "^0.11.0",
+        "strip-indent": "^3.0.0"
+      },
+      "dependencies": {
+        "magic-string": {
+          "version": "0.27.0",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+          "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+          "dev": true,
+          "requires": {
+            "@jridgewell/sourcemap-codec": "^1.4.13"
+          }
+        }
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -22567,11 +22989,10 @@
       }
     },
     "typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
-      "dev": true,
-      "peer": true
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "dev": true
     },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
diff --git a/package.json b/package.json
index ee92d26..b7482a0 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "description": "A simple tooltip action and component designed for Svelte.",
   "author": "Kieran Boyle (https://github.com/dysfunc)",
   "svelte": "./src/index.js",
+  "types": "./src/index.d.ts",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
   "sideEffects": false,
@@ -63,6 +64,8 @@
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "svelte": "^3.49.0",
-    "svelte-loader": "^3.0.0"
+    "svelte-check": "^3.5.1",
+    "svelte-loader": "^3.0.0",
+    "typescript": "^5.2.2"
   }
 }
diff --git a/src/index.d.ts b/src/index.d.ts
new file mode 100644
index 0000000..27c4cd6
--- /dev/null
+++ b/src/index.d.ts
@@ -0,0 +1 @@
+export { default } from "./tooltip.svelte";
diff --git a/src/tooltip.svelte b/src/tooltip.svelte
index 2137f42..79a7f6d 100644
--- a/src/tooltip.svelte
+++ b/src/tooltip.svelte
@@ -1,4 +1,6 @@
 <script>
+  // @ts-check
+
   import { onMount, onDestroy } from 'svelte';
   import { formatVariableKey, getMinWidth, isInViewport } from './helpers';
   import { inverse } from './constants';
@@ -7,25 +9,44 @@
   export let align = 'left';
   export let position = 'top';
   export let maxWidth = 200;
-  export let style = null;
+  /**
+   * @type {{ [x: string]: any; } | null}
+   */
+   export let style = null;
   export let theme = '';
   export let animation = '';
   export let arrow = true;
   export let autoPosition = false;
 
+  /**
+   * @type {HTMLSpanElement | null}
+   */
   let containerRef = null;
+  /**
+   * @type {HTMLDivElement | null}
+   */
   let tooltipRef = null;
   let minWidth = 0;
+  /**
+   * @type {{ $destroy: () => void; } | null}
+   */
   let component = null;
   let initialPosition = position;
+  /**
+   * @type {string | null}
+   */
   let animationEffect = null;
   let show = false;
+  /**
+   * @type {number | null | undefined}
+   */
   let timer = null;
 
   const onMouseEnter = () => {
     const delay = animation ? 200 : 0;
 
     if (autoPosition && !isInViewport(tooltipRef)) {
+      // @ts-ignore
       position = inverse[position];
     }
 
@@ -55,8 +76,10 @@
 
     if (tooltipRef !== null) {
       if (isComponent && !component) {
+        // @ts-ignore
         component = new content.component({
           target: tooltipRef,
+          // @ts-ignore
           props: content.props
         });
       }
diff --git a/src/tooltip.svelte.d.ts b/src/tooltip.svelte.d.ts
new file mode 100644
index 0000000..5522580
--- /dev/null
+++ b/src/tooltip.svelte.d.ts
@@ -0,0 +1,49 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export interface ComponentProps {
+  /**
+   * @default ''
+   */
+  content?: string;
+
+  /**
+   * @default 'top'
+   */
+  position?: string;
+
+  /**
+   * @default 200
+   */
+  maxWidth?: number;
+
+  /**
+   * @default null
+   */
+  style?: undefined;
+
+  /**
+   * @default ''
+   */
+  theme?: string;
+
+  /**
+   * @default ''
+   */
+  animation?: string;
+
+  /**
+   * @default true
+   */
+  arrow?: boolean;
+
+  /**
+   * @default false
+   */
+  autoPosition?: boolean;
+}
+
+export default class Component extends SvelteComponentTyped<
+  ComponentProps,
+  Record<string, any>,
+  { default: {} }
+> {}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..bd0083e
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "ignoreDeprecations": "5.0",
+    "importsNotUsedAsValues": "error",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "strict": true,
+    "types": ["svelte"],
+    "paths": {
+      "@svelte-plugins/tooltips": ["./src"],
+      "@svelte-plugins/tooltips/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

From be47d33284231762f8a8edaaf196b4c10bab10bb Mon Sep 17 00:00:00 2001
From: Kieran Boyle <norcal.kieran@gmail.com>
Date: Tue, 12 Sep 2023 10:48:10 -0700
Subject: [PATCH 3/6] feat(action): add action attribute to control display of
 tooltip

---
 README.md                 |  1 +
 docs/src/App.svelte       | 14 +++++++------
 src/action-tooltip.svelte |  3 ++-
 src/action.js             | 37 +++++++++++++++++++++++++++++----
 src/tooltip.svelte        | 43 +++++++++++++++++++++++++++++++--------
 5 files changed, 79 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 2356d10..82d3ee7 100644
--- a/README.md
+++ b/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`)                     |
diff --git a/docs/src/App.svelte b/docs/src/App.svelte
index 0c5daf0..2c4de9a 100644
--- a/docs/src/App.svelte
+++ b/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>
diff --git a/src/action-tooltip.svelte b/src/action-tooltip.svelte
index 3d873b9..50c43dd 100644
--- a/src/action-tooltip.svelte
+++ b/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);
diff --git a/src/action.js b/src/action.js
index 64414cb..07855d6 100644
--- a/src/action.js
+++ b/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);
diff --git a/src/tooltip.svelte b/src/tooltip.svelte
index 79a7f6d..be9c79d 100644
--- a/src/tooltip.svelte
+++ b/src/tooltip.svelte
@@ -5,6 +5,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';
@@ -12,7 +13,7 @@
   /**
    * @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}

From 3d6baeb960dded99925bba87a9deedc54081841b Mon Sep 17 00:00:00 2001
From: Kieran Boyle <norcal.kieran@gmail.com>
Date: Tue, 12 Sep 2023 11:50:35 -0700
Subject: [PATCH 4/6] refactor(styles): add white-scape css variables for more
 control

---
 README.md                 | 4 +++-
 docs/src/App.svelte       | 4 ++--
 src/action-tooltip.svelte | 8 +++++---
 src/tooltip.svelte        | 8 +++++---
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 82d3ee7..f111669 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,7 @@ You can customize tooltips theme using several methods:
 Tooltip CSS variables:
 
 ```css
+--tooltip-arrow-size: 10px;
 --tooltip-background-color: rgba(0, 0, 0, 0.9);
 --tooltip-border-radius: 4px;
 --tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
@@ -88,8 +89,9 @@ Tooltip CSS variables:
 --tooltip-offset-x: 12px;
 --tooltip-offset-y: 12px;
 --tooltip-padding: 12px;
+--tooltip-white-space-hidden: nowrap;
+--tooltip-white-space-shown: normal;
 --tooltip-z-index: 100;
---tooltip-arrow-size: 10px;
 ```
 
 ### Using the theme property
diff --git a/docs/src/App.svelte b/docs/src/App.svelte
index 2c4de9a..627ae63 100644
--- a/docs/src/App.svelte
+++ b/docs/src/App.svelte
@@ -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>" action="click" position="top" animation="slide" arrow={false}><i>top</i></Tooltip> when clicked.
+		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> when I hover.
 	</div>
 
 	<div class="example">
@@ -94,7 +94,7 @@
         position="right"
         action="click"
         theme="tooltip-theme">
-        <b>right</b>.
+        <b>right</b> when clicked.
       </Tooltip>
     </p>
     <Prism showLineNumbers={true} code={`
diff --git a/src/action-tooltip.svelte b/src/action-tooltip.svelte
index 50c43dd..a7fdd9d 100644
--- a/src/action-tooltip.svelte
+++ b/src/action-tooltip.svelte
@@ -79,6 +79,7 @@
    *--------------------------*/
 
   :root {
+    --tooltip-arrow-size: 10px;
     --tooltip-background-color: rgba(0, 0, 0, 0.9);
     --tooltip-border-radius: 4px;
     --tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
@@ -91,8 +92,9 @@
     --tooltip-offset-x: 12px;
     --tooltip-offset-y: 12px;
     --tooltip-padding: 12px;
+    --tooltip-white-space-hidden: nowrap;
+    --tooltip-white-space-shown: normal;
     --tooltip-z-index: 100;
-    --tooltip-arrow-size: 10px;
   }
 
   /*--------------------------*
@@ -114,14 +116,14 @@
     position: absolute;
     text-align: left;
     visibility: hidden;
-    white-space: nowrap;
+    white-space: var(--tooltip-white-space-hidden);
     z-index: var(--tooltip-z-index);
   }
 
   .tooltip.show {
     opacity: 1;
     visibility: visible;
-    white-space: normal;
+    white-space: var(--tooltip-white-space-shown);
   }
 
   .tooltip.bottom:after,
diff --git a/src/tooltip.svelte b/src/tooltip.svelte
index be9c79d..d1bbf09 100644
--- a/src/tooltip.svelte
+++ b/src/tooltip.svelte
@@ -164,6 +164,7 @@
    *--------------------------*/
 
   :root {
+    --tooltip-arrow-size: 10px;
     --tooltip-background-color: rgba(0, 0, 0, 0.9);
     --tooltip-border-radius: 4px;
     --tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
@@ -176,8 +177,9 @@
     --tooltip-offset-x: 0px;
     --tooltip-offset-y: 0px;
     --tooltip-padding: 12px;
+    --tooltip-white-space-hidden: nowrap;
+    --tooltip-white-space-shown: normal;
     --tooltip-z-index: 100;
-    --tooltip-arrow-size: 10px;
   }
 
   /*--------------------------*
@@ -203,14 +205,14 @@
     position: absolute;
     text-align: left;
     visibility: hidden;
-    white-space: nowrap;
+    white-space: var(--tooltip-white-space-hidden);
     z-index: var(--tooltip-z-index);
   }
 
   .tooltip.show {
     opacity: 1;
     visibility: visible;
-    white-space: normal;
+    white-space: var(--tooltip-white-space-shown);
   }
 
   .tooltip.bottom:after,

From 06b57ac119e3f70f33e007f9d435b8b423304b61 Mon Sep 17 00:00:00 2001
From: Kieran Boyle <norcal.kieran@gmail.com>
Date: Tue, 12 Sep 2023 11:56:53 -0700
Subject: [PATCH 5/6] fix(tests): update test snapshots

---
 src/tooltip.snap.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/tooltip.snap.js b/src/tooltip.snap.js
index 5673ad2..2ef7061 100644
--- a/src/tooltip.snap.js
+++ b/src/tooltip.snap.js
@@ -15,6 +15,7 @@ exports[`Components: Tooltip should render the component 1`] = `
         
       </div>
     </span>
+    
   </div>
 </body>
 `;

From 736045f45343d292f4cd2c244c15cc00b1702dc5 Mon Sep 17 00:00:00 2001
From: Kieran Boyle <norcal.kieran@gmail.com>
Date: Tue, 12 Sep 2023 11:59:57 -0700
Subject: [PATCH 6/6] fix(tests): update test snapshots

---
 src/action.js | 118 +++++++++++++++++++++++++-------------------------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/src/action.js b/src/action.js
index 07855d6..0611463 100644
--- a/src/action.js
+++ b/src/action.js
@@ -2,75 +2,75 @@ import Tooltip from './action-tooltip.svelte';
 
 export const tooltip = (element, props) => {
 
-	let component = null;
-	let title = element.getAttribute('title');
-	let action = props?.action || element.getAttribute('action') || 'hover';
+  let component = null;
+  let title = element.getAttribute('title');
+  let action = props?.action || element.getAttribute('action') || 'hover';
 
-	if (title) {
-		element.removeAttribute('title');
+  if (title) {
+    element.removeAttribute('title');
 
-		props = {
-			content: title,
-			...props
-		}
-	}
+    props = {
+      content: title,
+      ...props
+    }
+  }
 
-	const onClick = () => {
-		if (component) {
-			onMouseLeave();
-		} else {
-			onMouseEnter();
-		}
-	};
+  const onClick = () => {
+    if (component) {
+      onMouseLeave();
+    } else {
+      onMouseEnter();
+    }
+  };
 
-	const onMouseEnter = () => {
-		if (!component) {
-			component = new Tooltip({
-				target: element,
-				props
-			});
-		}
-	};
+  const onMouseEnter = () => {
+    if (!component) {
+      component = new Tooltip({
+        target: element,
+        props
+      });
+    }
+  };
 
-	const onMouseLeave = () => {
-		if (component) {
-			component.$destroy();
-			component = null;
-		}
-	};
+  const onMouseLeave = () => {
+    if (component) {
+      component.$destroy();
+      component = null;
+    }
+  };
 
-	const addListeners = () => {
-		if (element !== null) {
-			removeListeners();
+  const addListeners = () => {
+    if (element !== null) {
+      removeListeners();
 
-			if (action === 'click') {
-				element.addEventListener('click', onClick);
-			} else {
-				element.addEventListener('mouseenter', onMouseEnter);
-				element.addEventListener('mouseleave', onMouseLeave);
-			}
-		}
-	}
+      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);
-		}
-	};
+  const removeListeners = () => {
+    if (element !== null) {
+      element.removeEventListener('click', onClick);
+      element.removeEventListener('mouseenter', onMouseEnter);
+      element.removeEventListener('mouseleave', onMouseLeave);
+    }
+  };
 
-	addListeners();
+  addListeners();
 
-	element.style.position = 'relative';
+  element.style.position = 'relative';
 
-	return {
-		destroy() {
-			removeListeners();
+  return {
+    destroy() {
+      removeListeners();
 
-			if (title) {
-				element.setAttribute('title', title);
-			}
-		}
-	};
+      if (title) {
+        element.setAttribute('title', title);
+      }
+    }
+  };
 }