29 lines
1.0 KiB
TypeScript
29 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Info } from "lucide-react";
|
|
|
|
export function InfoBubble({ text }: { text: string }) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<span className="relative inline-flex align-middle ml-1">
|
|
<button
|
|
type="button"
|
|
aria-label="Hilfe anzeigen"
|
|
onMouseEnter={() => setOpen(true)}
|
|
onMouseLeave={() => setOpen(false)}
|
|
onClick={() => setOpen((o) => !o)}
|
|
className="flex h-4 w-4 items-center justify-center rounded-full bg-indigo-100 text-indigo-500 hover:bg-indigo-200 dark:bg-indigo-500/20 dark:text-indigo-300 dark:hover:bg-indigo-500/30"
|
|
>
|
|
<Info className="h-2.5 w-2.5" strokeWidth={2.5} />
|
|
</button>
|
|
{open && (
|
|
<span className="absolute left-1/2 top-6 z-20 w-64 -translate-x-1/2 rounded-lg border border-zinc-200 bg-white p-2.5 text-xs leading-snug text-zinc-700 shadow-lg dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200">
|
|
{text}
|
|
</span>
|
|
)}
|
|
</span>
|
|
);
|
|
}
|