Tooltip

<Button id="type-1" class="m-8">Tooltip trigger</Button>
<Tooltip
  color="default"
  offset={6}
  triggeredBy="#type-1">Tooltip content</Tooltip>

<script lang="ts">
	import { Tooltip, Button } from 'svelte-5-ui-lib';
</script>

<div class="mt-20 flex justify-center">
	<Button id="btn">Click me</Button>
	<Tooltip showOn="click" triggeredBy="#btn" color="blue" position="top" class="p-4"
		>Click anywhere to hide me.</Tooltip
	>
</div>

<script lang="ts">
	import { Tooltip, Button } from 'svelte-5-ui-lib';
	import { onDestroy } from 'svelte';

	let tooltipVisible = $state(false);
	let counter = $state(0);
	let countdownInterval: ReturnType<typeof setInterval> | undefined;

	const startCounter = () => {
		counter = 0;
		countdownInterval = setInterval(() => {
			counter++;
		}, 1000);
	};

	const stopCounter = () => {
		if (countdownInterval) {
			clearInterval(countdownInterval);
			countdownInterval = undefined;
		}
		counter = 0;
	};

	const handleClick = async () => {
		// If tooltip is visible, hide it immediately and stop counter
		if (tooltipVisible) {
			tooltipVisible = false;
			stopCounter();
			return;
		}
		startCounter();
		// Start the initial 2-second countdown
		let initialCounter = 2;
		const initialInterval = setInterval(() => {
			initialCounter--;
			if (initialCounter === 0) {
				clearInterval(initialInterval);
			}
		}, 1000);

		// Wait 2 seconds then show tooltip and start counter
		await new Promise((resolve) => setTimeout(resolve, 2000));
		tooltipVisible = true;

		// Wait 4 seconds then hide tooltip and stop counter
		await new Promise((resolve) => setTimeout(resolve, 2000));
		tooltipVisible = false;
		stopCounter();
	};

	// Cleanup on component destruction
	onDestroy(() => {
		stopCounter();
	});
</script>

<div class="mt-20 flex justify-center">
	<Button id="myButton" onclick={handleClick}>
		<div class="flex flex-col gap-1">
			Click Me to show in 2 sec and hide in 4 sec
			<div>Time elapsed: {counter}s</div>
			<div class="text-sm text-white">Will hide in {Math.max(0, 4 - counter)}s</div>
		</div>
	</Button>

	<Tooltip visible={tooltipVisible} class="-m-14 p-4 text-center" color="purple"
		>Controlled tooltip</Tooltip
	>
</div>

<script lang="ts">
	import { Button, Tooltip } from 'svelte-5-ui-lib';
</script>

<div class="m-4 flex justify-center">
	<div id="ext-ref" class=" m-8 w-40 rounded-lg border border-gray-200 p-2 dark:border-gray-600">
		External reference
	</div>
</div>
<div class="space-x-4 rtl:space-x-reverse">
	<Button id="ref-left">Left</Button>
	<Button id="ref-top">Top</Button>
	<Button id="ref-right">Right</Button>
</div>
<Tooltip
	reference="#ext-ref"
	color="emerald"
	triggeredBy="#ref-left"
	position="left"
	class="w-20 text-sm font-light">Tooltip content.</Tooltip
>
<Tooltip
	reference="#ext-ref"
	color="cyan"
	triggeredBy="#ref-top"
	position="top"
	class="w-20 text-sm font-light">Tooltip content.</Tooltip
>
<Tooltip
	reference="#ext-ref"
	color="pink"
	triggeredBy="#ref-right"
	position="right"
	class="w-20 text-sm font-light">Tooltip content.</Tooltip
>

<script lang="ts">
	import { Span, P, Tooltip } from 'svelte-5-ui-lib';
</script>

<P class="mt-20"
	>Lorem ipsum dolor sit amet, consectetur adipiscing <Span highlight="red" id="ex-inline"
		>tool tip in a paragraph</Span
	> elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</P
>

<Tooltip triggeredBy="#ex-inline" color="yellow" position="top" class="p-4">Tooltip content</Tooltip
>