From 25ee5d47e30862e3644fe53082940b759e7f01f8 Mon Sep 17 00:00:00 2001
From: dusk <y.bera003.06@protonmail.com>
Date: Wed, 2 Apr 2025 07:30:55 +0300
Subject: [PATCH] feat: more tooltips
---
src/routes/+page.svelte | 37 +++++++++++++++++++++++++++----------
1 file changed, 27 insertions(+), 10 deletions(-)
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e9c06d7..201493d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,6 +4,7 @@
import Window from '../components/window.svelte';
import LatestStuff from './lateststuff.md';
import { renderDate, renderRelativeDate } from '$lib/dateFmt';
+ import Tooltip from '../components/tooltip.svelte';
interface Props {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -34,14 +35,20 @@
{/each}
</div>
<div class="flex flex-grow">
- <div class="w-36 [padding:8px] place-content-center place-self-center bg-ralsei-black/20">
- <img
- class="w-36 u-photo hover:invert transition-all [transition-duration:300ms]"
- src="/pfp-iojkqpwerojnasduijf.webp"
- alt="my angelsona"
- title="that's me! my angelsona :3c"
- />
- </div>
+ <Tooltip>
+ {#snippet tooltipContent()}
+ that's me! my angelsona :3c
+ {/snippet}
+ <div
+ class="w-36 [padding:8px] place-content-center place-self-center bg-ralsei-black/20"
+ >
+ <img
+ class="w-36 u-photo hover:invert transition-all [transition-duration:300ms]"
+ src="/pfp-iojkqpwerojnasduijf.webp"
+ alt="my angelsona"
+ />
+ </div>
+ </Tooltip>
<div
class="flex flex-row flex-grow place-content-center ml-1.5 [padding:8px] bg-ralsei-black/20"
>
@@ -49,8 +56,18 @@
class="place-self-center m-0 mr-4 [padding-left:1em] sm:[padding-left:0.5em] leading-none marker:[content:'->'] [list-style-type:'->']"
>
<li class="[list-style-type:'->'] p-note">trying to do stuff</li>
- <li class="[list-style-type:'->'] p-note" title="angelrobotdollpuppything">
- is a thing (it/they)
+ <li class="[list-style-type:'->'] p-note">
+ <Tooltip
+ x="translate-x-none"
+ y="translate-y-none"
+ targetX="group-hover:translate-x-[80%]"
+ targetY="group-hover:-translate-y-[70%]"
+ >
+ {#snippet tooltipContent()}
+ angelrobotdollpuppything
+ {/snippet}
+ is a thing (it/they)
+ </Tooltip>
</li>
<li class="[list-style-type:'->']">
<span class="p-category">software engineer</span>,