component: Tooltip (#44)

Co-authored-by: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>

src/lib/components/ui/tooltip/index.ts

@@ -0,0 +1,17 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Content from './tooltip-content.svelte';
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+const Arrow = TooltipPrimitive.Arrow;
+
+export {
+	Arrow,
+	Content,
+	Root,
+	Root as Tooltip,
+	Arrow as TooltipArrow,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Trigger
+};

src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, flyAndScale } from '$lib/utils.js';
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	type $$Props = TooltipPrimitive.ContentProps & {
+		tip?: boolean;
+	};
+
+	let className: $$Props['class'] = undefined;
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		y: 8,
+		duration: 150
+	};
+	export let tip: $$Props['tip'] = true;
+	export { className as class };
+</script>
+
+<TooltipPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		'z-50 max-w-xs text-balance rounded-md border bg-gray-1000 px-3 py-2 text-center text-sm text-background-200 shadow-md',
+		className
+	)}
+	{...$$restProps}
+>
+	{#if tip}
+		<div aria-hidden="true" class="bg-gray-1000">
+			<TooltipPrimitive.Arrow class="rounded-sm" />
+		</div>
+	{/if}
+	<slot></slot>
+</TooltipPrimitive.Content>

src/lib/config/sitemap.ts

@@ -270,7 +270,7 @@ export const aside_items: Aside = {
 		{
 			title: 'Tooltip',
 			href: '/tooltip',
-			status: 'soon'
+			status: 'new'
 		},
 		{
 			title: 'Window',

src/routes/tooltip/+page.svelte

@@ -1 +1,44 @@
-<h1>tooltip</h1>
+<script lang="ts">
+	import Demo from '$lib/components/shared/demo.svelte';
+	import PageWrapper from '$lib/components/shared/page-wrapper.svelte';
+	import BoxAlign from './box-align.svelte';
+	import box_align_code from './box-align.svelte?raw';
+	import Components from './components.svelte';
+	import components_code from './components.svelte?raw';
+	import CustomContent from './custom-content.svelte';
+	import custom_content_code from './custom-content.svelte?raw';
+	import Default from './default.svelte';
+	import default_code from './default.svelte?raw';
+	import NoDelay from './no-delay.svelte';
+	import no_delay_code from './no-delay.svelte?raw';
+	import Other from './other.svelte';
+	import other_code from './other.svelte?raw';
+
+	export let data;
+</script>
+
+<PageWrapper title={data.title} description={data.description}>
+	<Demo id="default" code={default_code}>
+		<Default />
+	</Demo>
+
+	<Demo id="no-delay" code={no_delay_code}>
+		<NoDelay />
+	</Demo>
+
+	<Demo id="box-align" code={box_align_code}>
+		<BoxAlign />
+	</Demo>
+
+	<Demo id="custom-content" code={custom_content_code}>
+		<CustomContent />
+	</Demo>
+
+	<Demo id="components" code={components_code}>
+		<Components />
+	</Demo>
+
+	<Demo id="other" code={other_code}>
+		<Other />
+	</Demo>
+</PageWrapper>

src/routes/tooltip/+page.ts

@@ -0,0 +1,22 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export function load() {
+	const title = 'Tooltip';
+	const description =
+		'A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.';
+
+	const pageMetaTags = Object.freeze({
+		title,
+		description,
+		openGraph: {
+			title,
+			description
+		}
+	}) satisfies MetaTagsProps;
+
+	return {
+		pageMetaTags,
+		title,
+		description
+	};
+}

src/routes/tooltip/box-align.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import type { TooltipContentProps } from 'bits-ui';
+
+	type Align = Exclude<TooltipContentProps['align'], undefined>;
+	type Side = Exclude<TooltipContentProps['side'], undefined>;
+
+	const tooltips: Record<Align, { side: Side; content: string }[]> = {
+		start: [
+			{ side: 'bottom', content: 'The Evil Rabbit Jumped over the Fence' },
+			{ side: 'left', content: 'The Evil Rabbit Jumped over the Fence' },
+			{ side: 'right', content: 'The Evil Rabbit Jumped over the Fence' }
+		],
+		center: [
+			{ side: 'bottom', content: 'The Evil Rabbit Jumped over the Fence' },
+			{ side: 'left', content: 'The Evil Rabbit Jumped over the Fence' },
+			{ side: 'right', content: 'The Evil Rabbit Jumped over the Fence' }
+		],
+		end: [
+			{ side: 'bottom', content: 'The Evil Rabbit Jumped over the Fence' },
+			{ side: 'left', content: 'The Evil Rabbit Jumped over the Fence' },
+			{ side: 'right', content: 'The Evil Rabbit Jumped over the Fence' }
+		]
+	} as const;
+
+	const entries = Object.entries(tooltips) as [Align, { side: Side; content: string }[]][];
+</script>
+
+<div class="flex items-center justify-around">
+	{#each entries as [align, tooltips]}
+		<div class="grid">
+			{#each tooltips as { side, content }}
+				<Tooltip.Root>
+					<Tooltip.Trigger class="capitalize">{side}/{align}</Tooltip.Trigger>
+					<Tooltip.Content {side} {align}>
+						<p>{content}</p>
+					</Tooltip.Content>
+				</Tooltip.Root>
+			{/each}
+		</div>
+	{/each}
+</div>

src/routes/tooltip/components.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+</script>
+
+<div class="flex items-center justify-around">
+	<Tooltip.Root>
+		<Tooltip.Trigger asChild let:builder>
+			<Button builders={[builder]} size="sm">Bottom</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content side="bottom">The Evil Rabbit Jumped over the Fence.</Tooltip.Content>
+	</Tooltip.Root>
+
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Badge variant="gray" size="sm">LEFT</Badge>
+		</Tooltip.Trigger>
+		<Tooltip.Content side="bottom">The Evil Rabbit Jumped over the Fence.</Tooltip.Content>
+	</Tooltip.Root>
+
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Icons.LoaderCircle class="size-4 animate-spin" />
+		</Tooltip.Trigger>
+		<Tooltip.Content side="bottom">The Evil Rabbit Jumped over the Fence.</Tooltip.Content>
+	</Tooltip.Root>
+</div>

src/routes/tooltip/custom-content.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	const sides = ['top', 'bottom', 'left', 'right'] as const;
+</script>
+
+<div class="flex items-center justify-around">
+	{#each sides as side}
+		<Tooltip.Root>
+			<Tooltip.Trigger class="capitalize">{side}</Tooltip.Trigger>
+			<Tooltip.Content {side}>
+				The <b>Evil Rabbit</b> Jumped over the <i>Fence</i>.
+			</Tooltip.Content>
+		</Tooltip.Root>
+	{/each}
+</div>

src/routes/tooltip/default.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	const tooltips = [
+		{ side: 'top', content: 'The Evil Rabbit Jumped over the Fence' },
+		{ side: 'bottom', content: 'The Evil Rabbit Jumped over the Fence' },
+		{ side: 'left', content: 'The Evil Rabbit Jumped over the Fence' },
+		{ side: 'right', content: 'The Evil Rabbit Jumped over the Fence' }
+	] as const;
+</script>
+
+<div class="flex items-center justify-around">
+	{#each tooltips as { side, content }}
+		<Tooltip.Root>
+			<Tooltip.Trigger class="capitalize">{side}</Tooltip.Trigger>
+			<Tooltip.Content {side}>
+				<p>{content}</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
+	{/each}
+</div>

src/routes/tooltip/no-delay.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	const tooltips = [
+		{ side: 'top', content: 'The Evil Rabbit Jumped over the Fence' },
+		{ side: 'bottom', content: 'The Evil Rabbit Jumped over the Fence' },
+		{ side: 'left', content: 'The Evil Rabbit Jumped over the Fence' },
+		{ side: 'right', content: 'The Evil Rabbit Jumped over the Fence' }
+	] as const;
+</script>
+
+<div class="flex items-center justify-around">
+	{#each tooltips as { side, content }}
+		<Tooltip.Root openDelay={0}>
+			<Tooltip.Trigger class="capitalize">
+				{side}
+			</Tooltip.Trigger>
+			<Tooltip.Content {side}>
+				<p>{content}</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
+	{/each}
+</div>

src/routes/tooltip/other.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip';
+</script>
+
+<div class="flex items-center justify-around">
+	<Tooltip.Root>
+		<Tooltip.Trigger>No tip indicator</Tooltip.Trigger>
+		<Tooltip.Content tip={false}>The Evil Rabbit Jumped over the Fence.</Tooltip.Content>
+	</Tooltip.Root>
+
+	<Tooltip.Root>
+		<Tooltip.Trigger>No center text</Tooltip.Trigger>
+		<Tooltip.Content class="text-start">
+			The Evil Rabbit Jumped over the Fence multiple times.
+		</Tooltip.Content>
+	</Tooltip.Root>
+</div>