components/Card.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import ToolTip from '@/components/ToolTip';
 import StackTheDeck from '@/components/StackTheDeck';
 import tarokkaCards from '@/constants/tarokkaCards';
@@ -19,6 +20,7 @@ type CardProps = {
 };
 
 export default function Card({ dm, card, position, settings, flipAction }: CardProps) {
+	const [tooltip, setTooltip] = useState<React.ReactNode>(null);
 	const { aria, flipped } = card;
 
 	const handleClick = () => {
@@ -43,7 +45,7 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
 	};
 
 	return (
-		<ToolTip content={getTooltip()}>
+		<ToolTip content={tooltip || getTooltip()}>
 			<div
 				className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10 ${dm ? 'cursor-pointer' : ''} `}
 				onClick={handleClick}
@@ -68,7 +70,11 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
 							className={`absolute rounded-lg ${dm ? 'transition duration-500 group-hover:opacity-0' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`}
 						/>
 						{dm && !flipped && (
-							<StackTheDeck onRedo={() => console.log('Redo')} onPick={() => console.log('Pick')} />
+							<StackTheDeck
+								onRedo={() => console.log('Redo')}
+								onPick={() => console.log('Pick')}
+								onHover={setTooltip}
+							/>
 						)}
 					</div>
 					<div className="absolute inset-0 backface-hidden rotate-y-180">