feat: tooltips

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;
+}

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} />

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>
 

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} />

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>
 	);

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>