diff --git a/app/css/interceptor.css b/app/css/interceptor.css index 46987c7a..27bd563b 100644 --- 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 index 9e5e64b8..9b0c09d4 100644 --- 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(undefined) const copyTextToClipboard = async (event: JSX.TargetedMouseEvent) => { 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 (