wehub-resource-sync
e4dcfc49aa
Tests / Import Check (Python 3.13) (push) Has been cancelled
Tests / Import Check (Python 3.14) (push) Has been cancelled
Tests / Python Tests (Python 3.11) (push) Has been cancelled
Tests / Python Tests (Python 3.12) (push) Has been cancelled
Tests / Python Tests (Python 3.14) (push) Has been cancelled
Tests / Test Summary (push) Has been cancelled
Tests / Lint and Format (push) Has been cancelled
Tests / Web Node Tests (push) Has been cancelled
Tests / Import Check (Python 3.11) (push) Has been cancelled
Tests / Import Check (Python 3.12) (push) Has been cancelled
Tests / Python Tests (Python 3.13) (push) Has been cancelled
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
|
|
/**
|
|
* Instant CSS tooltip — replaces the native `title` attribute, whose
|
|
* ~1s OS-controlled hover delay makes icon-only buttons feel
|
|
* unresponsive. Fades in after a ~150ms hover-intent delay and also
|
|
* shows on keyboard focus. Pure CSS (group-hover, no portal), so
|
|
* callers should avoid mounting it flush against an overflow-hidden
|
|
* edge where the label would clip.
|
|
*/
|
|
export default function Tooltip({
|
|
label,
|
|
side = "bottom",
|
|
children,
|
|
}: {
|
|
label: string;
|
|
/** Which side of the trigger the label appears on. */
|
|
side?: "top" | "bottom";
|
|
children: ReactNode;
|
|
}) {
|
|
const place = side === "bottom" ? "top-full mt-1.5" : "bottom-full mb-1.5";
|
|
return (
|
|
<span className="group/tip relative inline-flex">
|
|
{children}
|
|
<span
|
|
role="tooltip"
|
|
aria-hidden
|
|
className={`pointer-events-none absolute left-1/2 z-[80] -translate-x-1/2 ${place} whitespace-nowrap rounded-md bg-[var(--foreground)] px-2 py-1 text-[11px] font-medium leading-none text-[var(--background)] opacity-0 shadow-md transition-opacity duration-100 group-focus-within/tip:opacity-100 group-hover/tip:opacity-100 group-hover/tip:delay-150`}
|
|
>
|
|
{label}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|