Merge pull request #5 from appwrite/tooltip

feat: created tooltip component and test

src/lib/components/index.ts

@@ -13,6 +13,7 @@ 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';
 export { default as Avatar } from './avatar.svelte';
 export { default as SwitchBox } from './switchBox.svelte';
 export { default as SwitchBoxes } from './switchBoxes.svelte';

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>

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();
+});