feat: tooltips!

src/components/tooltip.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import Window from "./window.svelte";
+
+    export let x: string = "translate-x-none"
+    export let y: string = "translate-y-full"
+    export let targetY: string = "group-hover:-translate-y-[105%]"
+    export let targetX: string = "group-hover:-translate-x-2/3"
+</script>
+
+<div class="group">
+    <div class="absolute scale-0 transition-all [transition-duration:300ms] opacity-0 group-hover:scale-100 group-hover:opacity-100 {y} {x} {targetY} {targetX} transform-gpu">
+        <Window tooltip>
+            <slot name="tooltipContent">Hello world!</slot>
+        </Window>
+    </div>
+    <slot/>
+</div>

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import { browser } from '$app/environment';
 	import getTitle from '$lib/getTitle';
 	import NavButton from '../components/navButton.svelte';
+	import Tooltip from '../components/tooltip.svelte';
 	import Window from '../components/window.svelte';
 	import '../styles/app.css';
 
@@ -157,14 +158,12 @@
 				<a class="hover:underline" href="https://xn--sr8hvo.ws">IndieWeb 🕸💍</a>
 				<a title="next site" class="hover:underline" href="https://xn--sr8hvo.ws/next">⮞</a>
 			</div>
-			<div class="group navbox">
-				<div class="absolute transition-all opacity-0 group-hover:opacity-100 translate-y-full -translate-x-1/3 group-hover:-translate-y-2/3 transform-gpu">
-					<Window tooltip>
+			<Tooltip>
+				<svelte:fragment slot="tooltipContent">
 					<img class="min-w-64" style="image-rendering: crisp-edges pixelated;" alt="visits" src="https://count.getloli.com/@yusdacrawebsite?name=yusdacrawebsitetest&theme=booru-lewd&padding=5&offset=0&align=center&scale=1&pixelated=1&darkmode=0&num={data.visitCount}"/>
-					</Window>
-				</div>
-				<p><span class="text-ralsei-green-light text-shadow-green">{data.visitCount}</span> visit(s)</p>
-			</div>
+				</svelte:fragment>
+				<div class="navbox"><p><span class="text-ralsei-green-light text-shadow-green">{data.visitCount}</span> visit(s)</p></div>
+			</Tooltip>
 			{#if isRoute("entries")}
 			<div class="navbox !gap-1">
 				<a class="align-middle hover:underline" href="/entries/_rss">rss</a>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { PUBLIC_BASE_URL } from '$env/static/public';
+	import Tooltip from '../components/tooltip.svelte';
 	import Window from '../components/window.svelte';
 
 	export let data;
@@ -10,12 +11,14 @@
 		<Window title="readme?" iconUri="/icons/question.png">
 			<div class="flex flex-col prose prose-ralsei prose-img:m-0 leading-none">
 				<div class="flex flex-grow">
+					<Tooltip x="-translate-x-[40%]" targetX="group-hover:-translate-x-[10%]">
+						<svelte:fragment slot="tooltipContent">character from q.u.q. (good vn go read it NOW)</svelte:fragment>
 						<img
 							class="mt-1 ml-1 w-36 [height:9rem] u-photo"
 							src="/pfp.png"
 							alt="character from q.u.q."
-						title="character from q.u.q. (good vn go read it NOW)"
 						/>
+					</Tooltip>
 					<ul
 						class="place-self-center m-0 leading-none marker:[content:'->'] [list-style-type:'->']"
 					>

src/routes/guestbook/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Tooltip from '../../components/tooltip.svelte';
 import Window from '../../components/window.svelte';
 
 	export let data;
@@ -43,15 +44,18 @@
 						<p class="text-sm font-monospace">--- posted by ...</p>
 					</div>
 				</div>
-				<div class="entry flex flex-wrap gap-1.5 p-1">
-					<p class="text-xl ms-2">auth via:</p>
+				<div class="entry flex flex-wrap gap-1.5 p-1 items-center">
+					<p class="text-xl ms-2 align-middle">auth via:</p>
 					{#each ['discord', 'github'] as platform}
+					<Tooltip x="" y="translate-y-[70%]" targetY="" targetX="">
+						<svelte:fragment slot="tooltipContent">post with {platform}</svelte:fragment>
 						<input
 							type="submit"
 							value={platform}
 							formaction="?/post_{platform}"
 							class="text-lg text-ralsei-green-light leading-5 hover:underline motion-safe:hover:animate-squiggle w-fit p-0.5"
 						/>
+					</Tooltip>
 					{/each}
 				</div>
 				{#if data.sendRatelimited}