Marc Mintel
06d5178614
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 23s
Build & Deploy / 🧪 QA (push) Successful in 1m11s
Build & Deploy / 🏗️ Build (push) Successful in 2m48s
Build & Deploy / 🚀 Deploy (push) Successful in 27s
Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 45s
Build & Deploy / 🔔 Notify (push) Successful in 4s
20 lines
899 B
TypeScript
20 lines
899 B
TypeScript
import React, { ReactNode } from 'react';
|
|
|
|
interface TooltipProps {
|
|
children: ReactNode;
|
|
content: string;
|
|
}
|
|
|
|
export function Tooltip({ children, content }: TooltipProps) {
|
|
return (
|
|
<div className="group relative flex items-center justify-center">
|
|
{children}
|
|
<div className="absolute bottom-full mb-3 invisible opacity-0 translate-y-2 group-hover:visible group-hover:opacity-100 group-hover:translate-y-0 w-max max-w-[250px] px-4 py-2.5 text-[11px] md:text-xs text-white bg-neutral-900/95 backdrop-blur-md rounded-xl shadow-2xl border border-white/10 transition-all duration-300 pointer-events-none z-50 text-center leading-relaxed font-normal normal-case tracking-normal">
|
|
{content}
|
|
{/* Triangle Arrow */}
|
|
<div className="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-neutral-900/95" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|