From e90381029a81f347aa01bd4fc19d8f998e29527e Mon Sep 17 00:00:00 2001
From: Zvonimir Fras <zvonimir@zvonimirfras.com>
Date: Tue, 1 Sep 2026 16:07:47 -0400
Subject: [PATCH] fix: use DefinitionTooltip for similarity score tags
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Carbon's Tooltip requires an interactive child that forwards refs and
event handlers. Tag is a plain span and doesn't forward those props,
so the tooltip trigger was never wired up — resulting in an empty tooltip.

Replace all three Tooltip usages in SimilarityScoreDisplay with
DefinitionTooltip (openOnHover), which is designed for annotating
non-interactive content.

Closes #5

Signed-off-by: Zvonimir Fras <zvonimir@zvonimirfras.com>
---
 .../app/components/SimilarityScoreDisplay.tsx   | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/SimilarityScoreDisplay.tsx b/frontend/src/app/components/SimilarityScoreDisplay.tsx
index 1885a85..579493f 100644
--- a/frontend/src/app/components/SimilarityScoreDisplay.tsx
+++ b/frontend/src/app/components/SimilarityScoreDisplay.tsx
@@ -1,4 +1,4 @@
-import { Tag, InlineLoading, Tooltip } from '@carbon/react';
+import { Tag, InlineLoading, DefinitionTooltip } from '@carbon/react';
 import { Error } from '@carbon/icons-react';
 import { TestResult } from '@/lib/api';
 import styles from './SimilarityScoreDisplay.module.scss';
@@ -37,11 +37,11 @@ export default function SimilarityScoreDisplay({ result, score, size = 'sm' }: S
 	// If a simple score is provided, use it directly
 	if (typeof score === 'number') {
 		return (
-			<Tooltip content={getScoreDescription(score)}>
+			<DefinitionTooltip definition={getScoreDescription(score)} openOnHover>
 				<Tag type={getScoreColor(score)} size={size}>
 					{score.toFixed(1)}%
 				</Tag>
-			</Tooltip>
+			</DefinitionTooltip>
 		);
 	}
 
@@ -70,23 +70,26 @@ export default function SimilarityScoreDisplay({ result, score, size = 'sm' }: S
 	// Scoring failed
 	if (similarity_scoring_status === 'failed') {
 		return (
-			<Tooltip content={similarity_scoring_error || 'Unknown error occurred during scoring'}>
+			<DefinitionTooltip
+				definition={similarity_scoring_error || 'Unknown error occurred during scoring'}
+				openOnHover
+			>
 				<div className={styles.errorContainer}>
 					<Error size={16} />
 					<span>Failed</span>
 				</div>
-			</Tooltip>
+			</DefinitionTooltip>
 		);
 	}
 
 	// Scoring completed
 	if (similarity_scoring_status === 'completed' && typeof similarity_score === 'number') {
 		return (
-			<Tooltip content={getScoreDescription(similarity_score)}>
+			<DefinitionTooltip definition={getScoreDescription(similarity_score)} openOnHover>
 				<Tag type={getScoreColor(similarity_score)} size={size}>
 					{similarity_score}%
 				</Tag>
-			</Tooltip>
+			</DefinitionTooltip>
 		);
 	}