23 lines
1.1 KiB
TypeScript
23 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
interface FeatureLimitationTooltipProps {
|
|
message: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export default function FeatureLimitationTooltip({ message, children }: FeatureLimitationTooltipProps) {
|
|
return (
|
|
<div className="group relative inline-block">
|
|
{children}
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-sm text-gray-300 whitespace-nowrap opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none z-50">
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-4 h-4 text-primary-blue flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>{message}</span>
|
|
</div>
|
|
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-iron-gray" />
|
|
</div>
|
|
</div>
|
|
);
|
|
} |