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>