trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-06-28 14:44:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: tooltips

Browse source
This commit is contained in:
trafficlunar 2025-05-01 21:05:43 +01:00
parent 5d5c6be04c
commit 7c13d106d7
6 changed files with 24 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/app/globals.css
View file

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

2
src/app/mii/[id]/page.tsx
View file

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