(feat): add new tooltip component

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"
   }
 }

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 |

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     |

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;",
+  },
+};

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>

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>