diff --git a/tests/Tooltip.test.svelte b/tests/Tooltip.test.svelte
deleted file mode 100644
index 7d57f2c8..00000000
--- a/tests/Tooltip.test.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-
-
-
- Resources are provisioned based on your account's organization.
-
-
-
- Resources are provisioned based on your account's organization.
-
-
-
- Top
-
-
-
- Right
-
-
-
- Bottom
-
-
-
- Left
-
-
-
- Resources are provisioned based on your account's organization.
-
-
-
-Learn more
-
-
-
-
- Resources are provisioned based on your account's organization.
-
-
-
-
- Resources are provisioned based on your account's organization.
-
diff --git a/tests/Tooltip/Tooltip.test.ts b/tests/Tooltip/Tooltip.test.ts
new file mode 100644
index 00000000..8dde83e3
--- /dev/null
+++ b/tests/Tooltip/Tooltip.test.ts
@@ -0,0 +1,168 @@
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import TooltipDefault from "./TooltipDefault.test.svelte";
+import TooltipHideIcon from "./TooltipHideIcon.test.svelte";
+import TooltipOpen from "./TooltipOpen.test.svelte";
+import TooltipCustomContent from "./TooltipCustomContent.test.svelte";
+import TooltipCustomIcon from "./TooltipCustomIcon.test.svelte";
+import TooltipDirections from "./TooltipDirections.test.svelte";
+import TooltipAlignments from "./TooltipAlignments.test.svelte";
+import TooltipEvents from "./TooltipEvents.test.svelte";
+import { user } from "../setup-tests";
+
+describe("Tooltip", () => {
+ test("should render with default props", () => {
+ const { container } = render(TooltipDefault);
+ expect(container.querySelector(".bx--tooltip__label")).toBeInTheDocument();
+ expect(
+ container.querySelector(".bx--tooltip__trigger"),
+ ).toBeInTheDocument();
+ });
+
+ test("should hide icon when hideIcon is true", async () => {
+ const { container } = render(TooltipHideIcon);
+
+ expect(
+ container.querySelector(".bx--tooltip__trigger"),
+ ).not.toBeInTheDocument();
+ expect(screen.getByText("Tooltip trigger")).toBeInTheDocument();
+ await user.click(screen.getByText("Tooltip trigger"));
+ expect(
+ screen.getByText("This tooltip has its icon hidden"),
+ ).toBeInTheDocument();
+ });
+
+ test("should show tooltip when open is true", () => {
+ const { container } = render(TooltipOpen);
+
+ expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
+ expect(container.querySelector(".bx--tooltip--shown")).toBeInTheDocument();
+ expect(
+ screen.getByText("This tooltip is initially open"),
+ ).toBeInTheDocument();
+ });
+
+ test("should open tooltip on focus", async () => {
+ const { container } = render(TooltipDefault);
+
+ const trigger = container.querySelector(".bx--tooltip__trigger");
+ assert(trigger);
+
+ await fireEvent.focus(trigger);
+ expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
+ expect(container.querySelector(".bx--tooltip--shown")).toBeInTheDocument();
+ });
+
+ test("should close tooltip on Escape key", async () => {
+ const { container } = render(TooltipOpen);
+
+ expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
+
+ const tooltip = container.querySelector(".bx--tooltip");
+ assert(tooltip);
+
+ await fireEvent.keyDown(tooltip, { key: "Escape" });
+ expect(container.querySelector(".bx--tooltip")).not.toBeInTheDocument();
+ });
+
+ test("should toggle tooltip on mousedown", async () => {
+ const { container } = render(TooltipDefault);
+
+ const trigger = container.querySelector(".bx--tooltip__trigger");
+ assert(trigger);
+
+ await user.click(trigger);
+ expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
+
+ await user.click(trigger);
+ expect(container.querySelector(".bx--tooltip")).not.toBeInTheDocument();
+ });
+
+ test("should render custom slot content", () => {
+ render(TooltipCustomContent);
+
+ expect(screen.getByTestId("tooltip-content")).toBeInTheDocument();
+ expect(screen.getByText("Custom tooltip content")).toBeInTheDocument();
+ });
+
+ test("should render custom icon via slot", async () => {
+ render(TooltipCustomIcon);
+
+ expect(screen.getByTestId("custom-icon")).toBeInTheDocument();
+ expect(screen.getByText("🔍")).toBeInTheDocument();
+
+ await user.click(screen.getByTestId("custom-icon"));
+ expect(screen.getByText("Custom icon tooltip")).toBeInTheDocument();
+ });
+
+ test("should apply correct direction classes", () => {
+ const { container } = render(TooltipDirections);
+
+ const tooltips = container.querySelectorAll(".bx--tooltip");
+
+ expect(tooltips.length).toBe(4);
+
+ expect(container.querySelector(".bx--tooltip--top")).toBeInTheDocument();
+ expect(container.querySelector(".bx--tooltip--right")).toBeInTheDocument();
+ expect(container.querySelector(".bx--tooltip--bottom")).toBeInTheDocument();
+ expect(container.querySelector(".bx--tooltip--left")).toBeInTheDocument();
+
+ expect(screen.getByText("Tooltip with top direction")).toBeInTheDocument();
+ expect(
+ screen.getByText("Tooltip with right direction"),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByText("Tooltip with bottom direction"),
+ ).toBeInTheDocument();
+ expect(screen.getByText("Tooltip with left direction")).toBeInTheDocument();
+ });
+
+ test("should apply correct alignment classes", () => {
+ const { container } = render(TooltipAlignments);
+
+ const tooltips = container.querySelectorAll(".bx--tooltip");
+ expect(tooltips.length).toBe(3);
+
+ expect(
+ container.querySelector(".bx--tooltip--align-start"),
+ ).toBeInTheDocument();
+ expect(
+ container.querySelector(".bx--tooltip--align-center"),
+ ).toBeInTheDocument();
+ expect(
+ container.querySelector(".bx--tooltip--align-end"),
+ ).toBeInTheDocument();
+
+ expect(
+ screen.getByText("Tooltip with start alignment"),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByText("Tooltip with center alignment"),
+ ).toBeInTheDocument();
+ expect(screen.getByText("Tooltip with end alignment")).toBeInTheDocument();
+ });
+
+ test("should dispatch events when tooltip opens and closes", async () => {
+ const { container } = render(TooltipEvents);
+
+ expect(screen.getByText("Open events: 0")).toBeInTheDocument();
+ expect(screen.getByText("Close events: 0")).toBeInTheDocument();
+
+ const trigger = container.querySelector(".bx--tooltip__trigger");
+ assert(trigger);
+
+ await user.click(trigger);
+ expect(screen.getByText("Open events: 1")).toBeInTheDocument();
+
+ await user.keyboard("{Escape}");
+ expect(screen.getByText("Close events: 1")).toBeInTheDocument();
+ });
+
+ test("should close tooltip when clicking outside", async () => {
+ const { container } = render(TooltipOpen);
+
+ expect(container.querySelector(".bx--tooltip")).toBeInTheDocument();
+
+ await user.click(document.body);
+ expect(container.querySelector(".bx--tooltip")).not.toBeInTheDocument();
+ });
+});
diff --git a/tests/Tooltip/TooltipAlignments.test.svelte b/tests/Tooltip/TooltipAlignments.test.svelte
new file mode 100644
index 00000000..73b170e7
--- /dev/null
+++ b/tests/Tooltip/TooltipAlignments.test.svelte
@@ -0,0 +1,15 @@
+
+
+
+ {#each alignments as align}
+
+
+ Tooltip with {align} alignment
+
+
+ {/each}
+
diff --git a/tests/Tooltip/TooltipCustomContent.test.svelte b/tests/Tooltip/TooltipCustomContent.test.svelte
new file mode 100644
index 00000000..837681e0
--- /dev/null
+++ b/tests/Tooltip/TooltipCustomContent.test.svelte
@@ -0,0 +1,7 @@
+
+
+
+ Custom tooltip content
+
diff --git a/tests/Tooltip/TooltipCustomIcon.test.svelte b/tests/Tooltip/TooltipCustomIcon.test.svelte
new file mode 100644
index 00000000..3546ac83
--- /dev/null
+++ b/tests/Tooltip/TooltipCustomIcon.test.svelte
@@ -0,0 +1,8 @@
+
+
+
+ 🔍
+ Custom icon tooltip
+
diff --git a/tests/Tooltip/TooltipDefault.test.svelte b/tests/Tooltip/TooltipDefault.test.svelte
new file mode 100644
index 00000000..af5a5827
--- /dev/null
+++ b/tests/Tooltip/TooltipDefault.test.svelte
@@ -0,0 +1,5 @@
+
+
+
diff --git a/tests/Tooltip/TooltipDirections.test.svelte b/tests/Tooltip/TooltipDirections.test.svelte
new file mode 100644
index 00000000..acfe4a26
--- /dev/null
+++ b/tests/Tooltip/TooltipDirections.test.svelte
@@ -0,0 +1,15 @@
+
+
+
+ {#each directions as direction}
+
+
+ Tooltip with {direction} direction
+
+
+ {/each}
+
diff --git a/tests/Tooltip/TooltipEvents.test.svelte b/tests/Tooltip/TooltipEvents.test.svelte
new file mode 100644
index 00000000..1d7e6fae
--- /dev/null
+++ b/tests/Tooltip/TooltipEvents.test.svelte
@@ -0,0 +1,27 @@
+
+
+
+
Open events: {openCount}
+
Close events: {closeCount}
+
+
+ Interact with this tooltip to trigger events
+
+
diff --git a/tests/Tooltip/TooltipHideIcon.test.svelte b/tests/Tooltip/TooltipHideIcon.test.svelte
new file mode 100644
index 00000000..f6716d31
--- /dev/null
+++ b/tests/Tooltip/TooltipHideIcon.test.svelte
@@ -0,0 +1,11 @@
+
+
+
+ This tooltip has its icon hidden
+
diff --git a/tests/Tooltip/TooltipOpen.test.svelte b/tests/Tooltip/TooltipOpen.test.svelte
new file mode 100644
index 00000000..0468808e
--- /dev/null
+++ b/tests/Tooltip/TooltipOpen.test.svelte
@@ -0,0 +1,7 @@
+
+
+
+ This tooltip is initially open
+