From 669d02510cd45ad96735e5ad9feb84129cbf6c99 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 9 May 2022 12:31:34 +0200
Subject: [PATCH] feat: created tooltip component and test

---
 src/lib/components/index.ts           |  1 +
 src/lib/components/tooltip.svelte     | 11 +++++++++++
 tests/unit/components/tooltip.test.ts |  9 +++++++++
 3 files changed, 21 insertions(+)
 create mode 100644 src/lib/components/tooltip.svelte
 create mode 100644 tests/unit/components/tooltip.test.ts

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index fd1b70c23b..4a2122b6a8 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -13,3 +13,4 @@ export { default as DropList } from './dropList.svelte';
 export { default as DropListItem } from './dropListItem.svelte';
 export { default as DropListLink } from './dropListLink.svelte';
 export { default as Collapsible } from './collapsible.svelte';
+export { default as Tooltip } from './tooltip.svelte';
diff --git a/src/lib/components/tooltip.svelte b/src/lib/components/tooltip.svelte
new file mode 100644
index 0000000000..636dcf36d3
--- /dev/null
+++ b/src/lib/components/tooltip.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    export let icon = 'info';
+    export let aria = 'info';
+</script>
+
+<button class="tooltip" aria-label={aria}>
+    <span class={`icon-${icon}`} aria-hidden="true" />
+    <span class="tooltip-popup" role="tooltip">
+        <slot />
+    </span>
+</button>
diff --git a/tests/unit/components/tooltip.test.ts b/tests/unit/components/tooltip.test.ts
new file mode 100644
index 0000000000..aba49467ec
--- /dev/null
+++ b/tests/unit/components/tooltip.test.ts
@@ -0,0 +1,9 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/svelte';
+import { Tooltip } from '../../../src/lib/components';
+
+test('shows tooltip', () => {
+    const { getByRole } = render(Tooltip);
+
+    expect(getByRole('tooltip')).toBeInTheDocument();
+});