diff --git a/package-lock.json b/package-lock.json
index 2b0dc73..957d39f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
         "hammerjs": "^2.0.8",
         "remark-gfm": "^3.0.1",
         "svelte-awesome-color-picker": "2.4.6",
-        "svelte-dnd-action": "0.9.24"
+        "svelte-dnd-action": "0.9.24",
+        "svelte-tooltip": "^1.2.0"
       },
       "devDependencies": {
         "@storybook/addon-docs": "^7.0.18",
@@ -7296,6 +7297,14 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/console-clear": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
+      "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
@@ -11738,6 +11747,14 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/local-access": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz",
+      "integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/local-pkg": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
@@ -15018,6 +15035,70 @@
         "node": ">= 10"
       }
     },
+    "node_modules/sirv-cli": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-0.4.6.tgz",
+      "integrity": "sha512-/Vj85/kBvPL+n9ibgX6FicLE8VjidC1BhlX67PYPBfbBAphzR6i0k0HtU5c2arejfU3uzq8l3SYPCwl1x7z6Ww==",
+      "dependencies": {
+        "console-clear": "^1.1.0",
+        "get-port": "^3.2.0",
+        "kleur": "^3.0.0",
+        "local-access": "^1.0.1",
+        "sade": "^1.4.0",
+        "sirv": "^0.4.6",
+        "tinydate": "^1.0.0"
+      },
+      "bin": {
+        "sirv": "index.js"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sirv-cli/node_modules/@polka/url": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz",
+      "integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw=="
+    },
+    "node_modules/sirv-cli/node_modules/get-port": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
+      "integrity": "sha512-x5UJKlgeUiNT8nyo/AcnwLnZuZNcSjSw0kogRB+Whd1fjjFq4B1hySFxSFWWSn4mIBzg3sRNUDFYc4g5gjPoLg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/sirv-cli/node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/sirv-cli/node_modules/mime": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/sirv-cli/node_modules/sirv": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-0.4.6.tgz",
+      "integrity": "sha512-rYpOXlNbpHiY4nVXxuDf4mXPvKz1reZGap/LkWp9TvcZ84qD/nPBjjH/6GZsgIjVMbOslnY8YYULAyP8jMn1GQ==",
+      "dependencies": {
+        "@polka/url": "^0.5.0",
+        "mime": "^2.3.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -15532,6 +15613,14 @@
         }
       }
     },
+    "node_modules/svelte-tooltip": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/svelte-tooltip/-/svelte-tooltip-1.2.0.tgz",
+      "integrity": "sha512-FmaiNoCGkXBqF5AAscv+NdLtVIhywpqcaKw7mP1IksLJPMW3QaOPB8G23CHPQWde0J3A0NdCDQ3DI2isWGsDbg==",
+      "dependencies": {
+        "sirv-cli": "^0.4.4"
+      }
+    },
     "node_modules/svelte2tsx": {
       "version": "0.6.15",
       "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.6.15.tgz",
@@ -16147,6 +16236,14 @@
       "integrity": "sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==",
       "dev": true
     },
+    "node_modules/tinydate": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
+      "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/tinypool": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.3.1.tgz",
diff --git a/package.json b/package.json
index eeb8d33..fe50645 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,8 @@
     "fuse.js": "^6.6.2",
     "hammerjs": "^2.0.8",
     "remark-gfm": "^3.0.1",
+    "svelte-awesome-color-picker": "2.4.6",
     "svelte-dnd-action": "0.9.24",
-    "svelte-awesome-color-picker": "2.4.6"
+    "svelte-tooltip": "^1.2.0"
   }
 }
diff --git a/src/lib/components/Modal/Modal.stories.mdx b/src/lib/components/Modal/Modal.stories.mdx
index 76091e9..085b855 100644
--- a/src/lib/components/Modal/Modal.stories.mdx
+++ b/src/lib/components/Modal/Modal.stories.mdx
@@ -6,20 +6,20 @@ import { Meta } from "@storybook/blocks";
 
 You can set the following css variables for the modal
 
-| Variable                      | Default                          |
-| ----------------------------  | -------------------------------  |
-| --szot-modal-width            | fit-content                      |
-| --szot-modal-height           | fit-content                      |
-| --szot-modal-max-height       | calc(100vh - 1.2rem)             |
-| --szot-modal-max-width        | calc(100vw - 1.2rem)             |
-| --szot-modal-overlay-color    | ccc                              |
-| --szot-modal-overlay-blur     | 2px                              |
-| --szot-modal-z-index          | 9999                             |
-| --szot-modal-bg-color         | white                            |
-| --szot-modal-close-bg-color   | --szot-light-surface             |
-| --szot-modal-close-txt-color  | --szot-txt-on-light-surface      |
-| --szot-modal-padding          | 0.6rem                           |
-| --szot-modal-margin-content   | 0.6rem 0                         |
-| --szot-modal-header-padding   | 0.9375rem 0.9375rem 0 0.9375rem  |
-| --szot-modal-footer-padding   | 0 0.9375rem 0.9375rem 0.9375rem  |
-| --szot-modal-content-padding  | 0 0.9375rem 0.9375rem 0.9375rem  |
+| Variable                     | Default                         |
+| ---------------------------- | ------------------------------- |
+| --szot-modal-width           | fit-content                     |
+| --szot-modal-height          | fit-content                     |
+| --szot-modal-max-height      | calc(100vh - 1.2rem)            |
+| --szot-modal-max-width       | calc(100vw - 1.2rem)            |
+| --szot-modal-overlay-color   | ccc                             |
+| --szot-modal-overlay-blur    | 2px                             |
+| --szot-modal-z-index         | 9999                            |
+| --szot-modal-bg-color        | white                           |
+| --szot-modal-close-bg-color  | --szot-light-surface            |
+| --szot-modal-close-txt-color | --szot-txt-on-light-surface     |
+| --szot-modal-padding         | 0.6rem                          |
+| --szot-modal-margin-content  | 0.6rem 0                        |
+| --szot-modal-header-padding  | 0.9375rem 0.9375rem 0 0.9375rem |
+| --szot-modal-footer-padding  | 0 0.9375rem 0.9375rem 0.9375rem |
+| --szot-modal-content-padding | 0 0.9375rem 0.9375rem 0.9375rem |
diff --git a/src/lib/components/Tooltip/Tooltip.stories.mdx b/src/lib/components/Tooltip/Tooltip.stories.mdx
new file mode 100644
index 0000000..95eef5c
--- /dev/null
+++ b/src/lib/components/Tooltip/Tooltip.stories.mdx
@@ -0,0 +1,13 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Components/Tooltip/CSS Variables" />
+
+# CSS variables for Tooltip
+
+You can set the following css variables for the Tooltip
+
+| Variable                       | Default |
+| ------------------------------ | ------- |
+| --szot-tooltip-txt-color       | #ffffff |
+| --szot-tooltip-txt-font-size   | 1rem    |
+| --szot-tooltip-txt-font-weight | 400     |
diff --git a/src/lib/components/Tooltip/Tooltip.stories.ts b/src/lib/components/Tooltip/Tooltip.stories.ts
new file mode 100644
index 0000000..5243167
--- /dev/null
+++ b/src/lib/components/Tooltip/Tooltip.stories.ts
@@ -0,0 +1,53 @@
+import type { Meta } from "@storybook/svelte";
+import type { StoryObj, TemplateObj } from "$types/storybook";
+import Tooltip from "./Tooltip.svelte";
+import TooltipExample from "./TooltipExample.svelte";
+
+const meta = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"], // enable auto docs
+} satisfies Meta<Tooltip>;
+
+export default meta;
+
+type Template = TemplateObj<typeof meta, TooltipExample>;
+type Story = StoryObj<typeof meta, TooltipExample>;
+
+const template = {
+  render: (props) => ({
+    Component: TooltipExample,
+    props,
+  }),
+  args: {
+    tip: "Here's your tooltip",
+    position: "right",
+  },
+} satisfies Template;
+
+export const Default: Story = {
+  ...template,
+  args: {
+    ...template.args,
+    style: "",
+  },
+};
+
+export const Big: Story = {
+  ...template,
+  args: {
+    ...template.args,
+    iconSize: "50px",
+    style: "--szot-tooltip-txt-font-size:2rem;" + "--szot-tooltip-txt-font-weight:400;",
+  },
+};
+
+export const Colored: Story = {
+  ...template,
+  args: {
+    ...template.args,
+    iconColor: "red",
+    tipBgColor: "#928aff",
+    style: "--szot-tooltip-txt-color:red;",
+  },
+};
diff --git a/src/lib/components/Tooltip/Tooltip.svelte b/src/lib/components/Tooltip/Tooltip.svelte
new file mode 100644
index 0000000..5a60a38
--- /dev/null
+++ b/src/lib/components/Tooltip/Tooltip.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import SvelteTooltip from "svelte-tooltip";
+  import Icon from "../Icon/Icon.svelte";
+
+  type TTipPosition = "top" | "bottom" | "left" | "right";
+
+  export let tip: string;
+  export let position: TTipPosition;
+  export let iconSize = "";
+  export let iconColor = "";
+  export let tipBgColor = "#757575";
+  export let isActive = false;
+</script>
+
+<div class="tooltip-container">
+  <SvelteTooltip
+    {tip}
+    top={position === "top"}
+    bottom={position === "bottom"}
+    left={position === "left"}
+    right={position === "right"}
+    active={isActive}
+    color={tipBgColor}
+  >
+    <Icon
+      iconName="ph:info"
+      --szot-icon-color={iconColor}
+      --szot-icon-font-size={iconSize}
+    />
+  </SvelteTooltip>
+</div>
+
+<style lang="scss">
+  .tooltip-container {
+    cursor: pointer;
+    color: var(--szot-tooltip-txt-color, #ffffff);
+    font-size: var(--szot-tooltip-txt-font-size, 1rem);
+    font-weight: var(--szot-tooltip-txt-font-weight, 400);
+  }
+</style>
diff --git a/src/lib/components/Tooltip/TooltipExample.svelte b/src/lib/components/Tooltip/TooltipExample.svelte
new file mode 100644
index 0000000..9ccdaee
--- /dev/null
+++ b/src/lib/components/Tooltip/TooltipExample.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { ComponentProps } from "svelte";
+  import Tooltip from "./Tooltip.svelte";
+
+  // Force this example extend the base component interface, so we can use the
+  // spreed of restProps, instead of declare again all component interface manually.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface $$Props extends ComponentProps<Tooltip> {
+    style?: string;
+  }
+
+  // Used to force $$restProps be of type ComponentProps<Tooltip>;
+  $: restProps = $$restProps as ComponentProps<Tooltip>;
+
+  export let style = "";
+</script>
+
+<div {style}>
+  <Tooltip {...restProps} />
+</div>