From 7c13d106d72b88f024435ca29ce1f64710efa4de Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Thu, 1 May 2025 21:05:43 +0100
Subject: [PATCH] feat: tooltips

---
 src/app/globals.css               | 20 ++++++++++++++++++--
 src/app/mii/[id]/page.tsx         |  2 +-
 src/components/delete-mii.tsx     |  2 +-
 src/components/mii-list/index.tsx |  2 +-
 src/components/search-bar.tsx     |  7 ++-----
 src/components/tutorial/scan.tsx  |  1 +
 6 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 05ca41f..5c5b1e6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -48,11 +48,27 @@ body {
 }
 
 .checkbox::after {
-	content: "";
-	@apply hidden size-4 bg-cover bg-no-repeat;
+	@apply hidden size-4 bg-cover bg-no-repeat content-[''];
 	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7' /%3E%3C/svg%3E");
 }
 
 .checkbox:checked::after {
 	@apply block;
 }
+
+[data-tooltip] {
+	@apply relative z-10;
+}
+
+[data-tooltip]::before {
+	@apply content-[''] absolute left-1/2 -translate-x-1/2 top-full size-0 border-4 border-transparent border-b-orange-400 opacity-0 scale-75 transition-all duration-200 ease-out origin-bottom;
+}
+
+[data-tooltip]::after {
+	@apply content-[attr(data-tooltip)] absolute left-1/2 -translate-x-1/2 top-full mt-2 px-2 py-1 bg-orange-400 border border-orange-400 rounded text-sm text-white opacity-0 scale-75 transition-all duration-200 ease-out origin-top shadow-md whitespace-nowrap select-none pointer-events-none;
+}
+
+[data-tooltip]:hover::before,
+[data-tooltip]:hover::after {
+	@apply opacity-100 scale-100;
+}
diff --git a/src/app/mii/[id]/page.tsx b/src/app/mii/[id]/page.tsx
index 3430e10..188ce18 100644
--- a/src/app/mii/[id]/page.tsx
+++ b/src/app/mii/[id]/page.tsx
@@ -169,7 +169,7 @@ export default async function MiiPage({ params }: Props) {
 					<div className="flex gap-1 text-4xl justify-end text-orange-400">
 						{Number(session?.user.id) === mii.userId && (
 							<>
-								<Link href={`/edit/${mii.id}`} title="Edit Mii" className="aspect-square">
+								<Link href={`/edit/${mii.id}`} title="Edit Mii" data-tooltip="Edit" className="aspect-square">
 									<Icon icon="mdi:pencil" />
 								</Link>
 								<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy ?? 0} />
diff --git a/src/components/delete-mii.tsx b/src/components/delete-mii.tsx
index b4b84d5..d14e353 100644
--- a/src/components/delete-mii.tsx
+++ b/src/components/delete-mii.tsx
@@ -49,7 +49,7 @@ export default function DeleteMiiButton({ miiId, miiName, likes }: Props) {
 
 	return (
 		<>
-			<button onClick={() => setIsOpen(true)} title="Delete Mii" className="cursor-pointer aspect-square">
+			<button onClick={() => setIsOpen(true)} title="Delete Mii" data-tooltip="Delete" className="cursor-pointer aspect-square">
 				<Icon icon="mdi:trash" />
 			</button>
 
diff --git a/src/components/mii-list/index.tsx b/src/components/mii-list/index.tsx
index 54798c3..53a198a 100644
--- a/src/components/mii-list/index.tsx
+++ b/src/components/mii-list/index.tsx
@@ -112,7 +112,7 @@ export default function MiiList({ isLoggedIn, userId, sessionUserId }: Props) {
 
 										{userId && sessionUserId == userId && (
 											<div className="flex gap-1 text-2xl justify-end text-zinc-400">
-												<Link href={`/edit/${mii.id}`} title="Edit Mii">
+												<Link href={`/edit/${mii.id}`} title="Edit Mii" data-tooltip="Edit">
 													<Icon icon="mdi:pencil" />
 												</Link>
 												<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii.likes} />
diff --git a/src/components/search-bar.tsx b/src/components/search-bar.tsx
index e20df82..e7f62d8 100644
--- a/src/components/search-bar.tsx
+++ b/src/components/search-bar.tsx
@@ -34,11 +34,8 @@ export default function SearchBar() {
 				onKeyDown={handleKeyDown}
 				className="bg-orange-200 border-2 border-orange-400 py-2 px-3 rounded-l-xl outline-0 w-full placeholder:text-black/40"
 			/>
-			<button
-				onClick={handleSearch}
-				className="bg-orange-400 p-2 w-12 rounded-r-xl flex justify-center items-center cursor-pointer text-2xl transition-all hover:text-[1.75rem] active:text-2xl"
-			>
-				<Icon icon="ic:baseline-search" />
+			<button onClick={handleSearch} className="bg-orange-400 p-2 w-12 rounded-r-xl flex justify-center items-center cursor-pointer text-2xl">
+				<Icon icon="ic:baseline-search" className="transition-transform hover:scale-110 active:95" />
 			</button>
 		</div>
 	);
diff --git a/src/components/tutorial/scan.tsx b/src/components/tutorial/scan.tsx
index 836233b..73b8103 100644
--- a/src/components/tutorial/scan.tsx
+++ b/src/components/tutorial/scan.tsx
@@ -40,6 +40,7 @@ export default function ScanTutorialButton() {
 				type="button"
 				onClick={() => setIsOpen(true)}
 				className="text-3xl aspect-square flex justify-center items-center cursor-pointer underline-offset-2 hover:underline"
+				data-tooltip={"Add Mii tutorial"}
 			>
 				<Icon icon="fa:question-circle" />
 			</button>