diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
index fc4daba8f..5595b6ad1 100644
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
@@ -1,6 +1,6 @@
 <a [href]="previewUrl" target="_blank" class="{{btn_classes}}"
   [ngbPopover]="previewContent" [popoverTitle]="document.title | documentTitle"
-  autoClose="true" popoverClass="shadow popover-preview" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
+  autoClose="true" [popoverClass]="popoverClass" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
   <ng-content></ng-content>
 </a>
 <ng-template #previewContent>
diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
index 15ee10833..dd600642f 100644
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
@@ -131,9 +131,7 @@ describe('PreviewPopupComponent', () => {
   it('should show preview on mouseover after delay to preload content', fakeAsync(() => {
     component.mouseEnterPreview()
     expect(component.popover.isOpen()).toBeTruthy()
-    expect(component.popoverHidden).toBeTruthy()
     tick(600)
-    expect(component.popoverHidden).toBeFalsy()
     component.close()
 
     component.mouseEnterPreview()
diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts b/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
index bac2c0121..d0db9528b 100644
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
@@ -38,7 +38,8 @@ export class PreviewPopupComponent implements OnDestroy {
   @ViewChild('popover') popover: NgbPopover
 
   mouseOnPreview: boolean
-  popoverHidden: boolean
+
+  popoverClass: string = 'shadow popover-preview'
 
   get renderAsObject(): boolean {
     return (this.isPdf && this.useNativePdfViewer) || !this.isPdf
@@ -102,11 +103,11 @@ export class PreviewPopupComponent implements OnDestroy {
     if (!this.popover.isOpen()) {
       // we're going to open but hide to pre-load content during hover delay
       this.popover.open()
-      this.popoverHidden = true
+      this.popoverClass = 'shadow popover-preview pe-none opacity-0'
       setTimeout(() => {
         if (this.mouseOnPreview) {
           // show popover
-          this.popoverHidden = false
+          this.popoverClass = this.popoverClass.replace('pe-none opacity-0', '')
         } else {
           this.popover.close()
         }
@@ -119,6 +120,6 @@ export class PreviewPopupComponent implements OnDestroy {
   }
 
   public close() {
-    this.popover.close()
+    this.popover.close(false)
   }
 }