Tooltip

<script lang="ts">
  import { Tooltip, Button } from 'sv5ui';
</script>

<Tooltip text="Add to library">
  <Button>Hover me</Button>
</Tooltip>

<Tooltip text="Top" side="top">
  <Button variant="outline">Top</Button>
</Tooltip>

<Tooltip text="Right" side="right">
  <Button variant="outline">Right</Button>
</Tooltip>

<Tooltip text="Bottom" side="bottom">
  <Button variant="outline">Bottom</Button>
</Tooltip>

<Tooltip text="Left" side="left">
  <Button variant="outline">Left</Button>
</Tooltip>

<Tooltip text="With arrow" arrow>
  <Button>Hover me</Button>
</Tooltip>

<Tooltip text="Custom arrow" arrow={{ width: 12, height: 6 }}>
  <Button variant="outline">Custom arrow</Button>
</Tooltip>

<Tooltip text="Copy" kbds={['meta', 'c']}>
  <Button>Copy</Button>
</Tooltip>

<Tooltip text="Search" kbds={['meta', 'k']}>
  <Button variant="outline">Search</Button>
</Tooltip>

<Tooltip>
  <Button>Rich tooltip</Button>

  {#snippet content()}
    <div class="flex flex-col gap-1">
      <span class="font-semibold">Custom Content</span>
      <span class="text-xs opacity-70">This tooltip uses the content snippet for rich markup.</span>
    </div>
  {/snippet}
</Tooltip>

<Tooltip text="You won't see me" disabled>
  <Button>Disabled tooltip</Button>
</Tooltip>

<Tooltip text="Instant" delayDuration={0}>
  <Button>No delay</Button>
</Tooltip>

<Tooltip text="Slow" delayDuration={1000}>
  <Button variant="outline">1s delay</Button>
</Tooltip>