ptr.pet
1<script lang="ts">
2 import Window from './window.svelte';
3
4 interface Props {
5 x?: string;
6 y?: string;
7 targetY?: string;
8 targetX?: string;
9 tooltipContent?: import('svelte').Snippet;
10 children?: import('svelte').Snippet;
11 style?: string;
12 }
13
14 let {
15 x = 'translate-x-none',
16 y = 'translate-y-full',
17 targetY = 'group-hover:-translate-y-[105%]',
18 targetX = 'group-hover:-translate-x-2/3',
19 tooltipContent,
20 children,
21 style = ''
22 }: Props = $props();
23</script>
24
25<div class="group" {style}>
26 <div
27 class="z-10 absolute scale-0 transition-all [transition-timing-function:cubic-bezier(0.4,0,0.2,1.6)] [transition-duration:300ms] opacity-0 group-hover:scale-100 group-hover:opacity-100 {y} {x} {targetY} {targetX}"
28 >
29 <Window tooltip>
30 {#if tooltipContent}{@render tooltipContent()}{:else}Hello world!{/if}
31 </Window>
32 </div>
33 {@render children?.()}
34</div>