Files
portfolio/components/ui/Tooltip.tsx
T

25 lines
637 B
TypeScript

type TooltipProps = {
text: string;
children?: React.ReactNode;
};
export default function Tooltip({ text, children }: TooltipProps) {
return (
<span className="group relative inline-flex">
{children}
<span
role="tooltip"
className="
pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2
rounded-md bg-neutral-800 px-2 py-1 text-xs text-neutral-100
whitespace-nowrap opacity-0
transition-opacity duration-150
group-hover:opacity-100 group-focus-within:opacity-100
"
>
{text}
</span>
</span>
);
}