4c86a5b9ca
Self-hosted US Congress monitoring platform with AI policy briefs, bill/member/topic follows, ntfy + RSS + email notifications, alignment scoring, collections, and draft-letter generator. Authored by: Jack Levy
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef, useEffect } from "react";
|
|
import { HelpCircle } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface HelpTipProps {
|
|
content: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function HelpTip({ content, className }: HelpTipProps) {
|
|
const [visible, setVisible] = useState(false);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!visible) return;
|
|
const handler = (e: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) {
|
|
setVisible(false);
|
|
}
|
|
};
|
|
document.addEventListener("mousedown", handler);
|
|
return () => document.removeEventListener("mousedown", handler);
|
|
}, [visible]);
|
|
|
|
return (
|
|
<div className={cn("relative inline-flex items-center", className)} ref={ref}>
|
|
<button
|
|
type="button"
|
|
onMouseEnter={() => setVisible(true)}
|
|
onMouseLeave={() => setVisible(false)}
|
|
onClick={() => setVisible((v) => !v)}
|
|
aria-label="Help"
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<HelpCircle className="w-3.5 h-3.5" />
|
|
</button>
|
|
{visible && (
|
|
<div className="absolute left-5 top-0 z-50 w-64 bg-popover border border-border rounded-md shadow-lg p-3 text-xs text-muted-foreground leading-relaxed">
|
|
{content}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|