39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
|
import { useSyncExternalStore } from "react";
|
||
|
|
import { hintsEnabled, subscribeHints } from "../lib/hints";
|
||
|
|
|
||
|
|
type Side = "top" | "bottom" | "left";
|
||
|
|
|
||
|
|
/** Wrap any element to show a short glass hint caption on hover — but only while the
|
||
|
|
* app-wide hints toggle (Settings → Appearance) is on. */
|
||
|
|
export default function Tooltip({
|
||
|
|
hint,
|
||
|
|
side = "top",
|
||
|
|
children,
|
||
|
|
}: {
|
||
|
|
hint: string;
|
||
|
|
side?: Side;
|
||
|
|
children: React.ReactNode;
|
||
|
|
}) {
|
||
|
|
const enabled = useSyncExternalStore(subscribeHints, hintsEnabled, hintsEnabled);
|
||
|
|
if (!enabled || !hint) return <>{children}</>;
|
||
|
|
|
||
|
|
const place =
|
||
|
|
side === "bottom"
|
||
|
|
? "top-full mt-2 left-1/2 -translate-x-1/2"
|
||
|
|
: side === "left"
|
||
|
|
? "right-full mr-2 top-1/2 -translate-y-1/2"
|
||
|
|
: "bottom-full mb-2 left-1/2 -translate-x-1/2";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span className="relative inline-flex group/tip">
|
||
|
|
{children}
|
||
|
|
<span
|
||
|
|
role="tooltip"
|
||
|
|
className={`glass pointer-events-none absolute ${place} z-50 w-max max-w-[220px] px-2.5 py-1.5 rounded-lg text-xs leading-snug text-fg font-normal normal-case tracking-normal opacity-0 group-hover/tip:opacity-100 transition-opacity duration-150`}
|
||
|
|
>
|
||
|
|
{hint}
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|