34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
|
|
import React, { ReactNode } from 'react';
|
|
|
|
interface TooltipProps {
|
|
children: ReactNode;
|
|
content: string;
|
|
position?: 'top' | 'bottom' | 'left' | 'right';
|
|
className?: string; // For extra styling on the wrapper
|
|
}
|
|
|
|
export const Tooltip: React.FC<TooltipProps> = ({ children, content, position = 'top', className = '' }) => {
|
|
const positionClasses = {
|
|
top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
|
|
bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
|
|
left: 'right-full top-1/2 -translate-y-1/2 mr-2',
|
|
right: 'left-full top-1/2 -translate-y-1/2 ml-2',
|
|
};
|
|
|
|
return (
|
|
<div className={`relative group ${className}`}>
|
|
{children}
|
|
<div
|
|
className={`absolute ${positionClasses[position]} z-50 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out`}
|
|
>
|
|
<div className="bg-stone-900/95 backdrop-blur-sm text-white text-[10px] font-bold uppercase tracking-widest py-2 px-3 rounded-lg shadow-xl whitespace-nowrap border border-white/10">
|
|
{content}
|
|
{/* Arrow */}
|
|
{/* <div className="absolute w-2 h-2 bg-stone-900 rotate-45 ..."></div> Optional */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|