fix tooltip not showing

DarkFlorist · Nov 5, 2024 · 44becb1 · 44becb1
1 parent b77fc4f
commit 44becb1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/app/css/interceptor.css b/app/css/interceptor.css
@@ -1735,3 +1735,15 @@ header:has(form[role='search']) h1 {
 		* + & { margin-left: 0.25em }
 	}
 }
+
+.tooltip {
+	background: #222222;
+	color: #ffffff;
+	padding: 0.3125rem 0.6875rem;
+	border: 0 none;
+	border-radius: 4px;
+	font-size: 0.8125rem;
+	white-space: nowrap;
+	pointer-events: none;
+	margin: 0;
+}
diff --git a/app/ts/components/subcomponents/InlineCard.tsx b/app/ts/components/subcomponents/InlineCard.tsx
@@ -16,18 +16,17 @@ export type InlineCardProps = {
 }
 
 export const InlineCard = ({ icon: Icon, label, copyValue, noCopy, onEditClicked, style, statusMessageDuration = 1500, warningMessage: warningMessage }: InlineCardProps) => {
-	const copyStatus = useSignal(false)
 	const tooltip = useSignal<TooltipConfig | undefined>(undefined)
 
 	const copyTextToClipboard = async (event: JSX.TargetedMouseEvent<HTMLButtonElement>) => {
 		event.currentTarget.blur()
 		await clipboardCopy(event.currentTarget.value || label)
-		copyStatus.value = true
+		tooltip.value = { message: 'Copied!', x: event.clientX, y: event.clientY }
 	}
 
 	useSignalEffect(() => {
-		if (copyStatus.value !== true) return
-		setTimeout(() => copyStatus.value = false, statusMessageDuration)
+		if (tooltip.value === undefined) return
+		setTimeout(() => tooltip.value = undefined, statusMessageDuration)
 	})
 
 	return (