diff --git a/packages/html-reporter/src/filter.ts b/packages/html-reporter/src/filter.ts
index 1b4fc18209..bece86e5ef 100644
--- a/packages/html-reporter/src/filter.ts
+++ b/packages/html-reporter/src/filter.ts
@@ -120,7 +120,7 @@ export class Filter {
         line: String(test.location.line),
         column: String(test.location.column),
         labels: test.tags.map(tag => tag.toLowerCase()),
-        annotations: test.annotations.map(a => a.type.toLowerCase() + ':' + a.description?.toLocaleLowerCase())
+        annotations: test.annotations.map(a => a.type.toLowerCase() + '=' + a.description?.toLocaleLowerCase())
       };
       (test as any).searchValues = searchValues;
     }
diff --git a/packages/html-reporter/src/testCaseView.css b/packages/html-reporter/src/testCaseView.css
index d87cf3aacb..b7727a5a8c 100644
--- a/packages/html-reporter/src/testCaseView.css
+++ b/packages/html-reporter/src/testCaseView.css
@@ -73,4 +73,14 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+}
+
+#annotation-copy-button{
+  padding-left: 3px;
+  display: none;
+}
+
+.test-case-annotation:hover #annotation-copy-button{
+  padding-left: 3px;
+  display: inline;
 }
\ No newline at end of file
diff --git a/packages/html-reporter/src/testCaseView.tsx b/packages/html-reporter/src/testCaseView.tsx
index 7e1722cf85..76ff9b3533 100644
--- a/packages/html-reporter/src/testCaseView.tsx
+++ b/packages/html-reporter/src/testCaseView.tsx
@@ -74,14 +74,11 @@ function renderAnnotationDescription(description: string) {
 }
 
 function TestCaseAnnotationView({ annotation: { type, description } }: { annotation: TestCaseAnnotation }) {
-  const [hover, setHover] = React.useState(false);
-  const onHover = () => setHover(true);
-  const onLeave = () => setHover(false);
   return (
-    <div className='test-case-annotation' onMouseEnter={onHover} onMouseLeave={onLeave}>
+    <div className='test-case-annotation'>
       <span style={{ fontWeight: 'bold', display: 'inline-block', marginBlock: '3px' }}>{type}</span>
       {description && <span>: {renderAnnotationDescription(description)}</span>}
-      <span style={{ paddingLeft: '3px' }}>{hover && description && <CopyToClipboard value={description} />}</span>
+      <span id='annotation-copy-button'>{description && <CopyToClipboard value={description} />}</span>
     </div>
   );
 }