diff --git a/ui/src/app/features/circle-loading-progress/circle-loading-progress.component.html b/ui/src/app/features/circle-loading-progress/circle-loading-progress.component.html
index aba808fcbe..c10cabd1db 100644
--- a/ui/src/app/features/circle-loading-progress/circle-loading-progress.component.html
+++ b/ui/src/app/features/circle-loading-progress/circle-loading-progress.component.html
@@ -23,7 +23,7 @@
   >
     <mat-icon>highlight_off</mat-icon>
   </div>
-  <div *ngSwitchCase="progressEnum.Failed" class="image-load-failed" [matTooltip]="error" matTooltipClass="top-arrow">
+  <div *ngSwitchCase="progressEnum.Failed" tooltipArrowHandler class="image-load-failed" [matTooltip]="error" matTooltipClass="top-arrow">
     <mat-icon>warning_amber</mat-icon>
   </div>
   <div *ngSwitchCase="progressEnum.InProgress" class="image-load-in-progress">
diff --git a/ui/src/app/features/circle-loading-progress/circle-loading-progress.module.ts b/ui/src/app/features/circle-loading-progress/circle-loading-progress.module.ts
index 98e90a93c8..de12d47aad 100644
--- a/ui/src/app/features/circle-loading-progress/circle-loading-progress.module.ts
+++ b/ui/src/app/features/circle-loading-progress/circle-loading-progress.module.ts
@@ -19,10 +19,11 @@ import { CircleLoadingProgressComponent } from './circle-loading-progress.compon
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { SharedModule } from 'src/app/shared/shared.module';
 
 @NgModule({
   declarations: [CircleLoadingProgressComponent],
   exports: [CircleLoadingProgressComponent],
-  imports: [CommonModule, MatIconModule, MatProgressSpinnerModule, MatTooltipModule],
+  imports: [CommonModule, MatIconModule, MatProgressSpinnerModule, MatTooltipModule, SharedModule],
 })
 export class CircleLoadingProgressModule {}
diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
new file mode 100644
index 0000000000..5396985ee4
--- /dev/null
+++ b/ui/src/app/shared/shared.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TooltipArrowHandlerDirective } from './tooltip-arrow-handler.directive';
+
+@NgModule({
+  declarations: [TooltipArrowHandlerDirective],
+  imports: [CommonModule],
+  exports: [TooltipArrowHandlerDirective],
+})
+export class SharedModule {}
diff --git a/ui/src/app/shared/tooltip-arrow-handler.directive.ts b/ui/src/app/shared/tooltip-arrow-handler.directive.ts
new file mode 100644
index 0000000000..8721cce784
--- /dev/null
+++ b/ui/src/app/shared/tooltip-arrow-handler.directive.ts
@@ -0,0 +1,37 @@
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+import { MatTooltip } from '@angular/material/tooltip';
+
+@Directive({
+  selector: '[tooltipArrowHandler]',
+})
+export class TooltipArrowHandlerDirective {
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2,
+    private matTooltip: MatTooltip,
+    private overlayContainer: OverlayContainer
+  ) {}
+
+  @HostListener('mouseenter') onMouseEnter() {
+    const position = this.el.nativeElement.getBoundingClientRect();
+
+    if (this.matTooltip) {
+      setTimeout(() => {
+        const tooltipElements = this.overlayContainer.getContainerElement().querySelectorAll('.mat-tooltip-panel');
+        const tooltipElement = Array.from(tooltipElements).find(el => {
+          return el.textContent === this.matTooltip.message;
+        });
+
+        if (tooltipElement) {
+          const tooltipPosition = tooltipElement.getBoundingClientRect();
+          if (tooltipPosition.bottom <= position.top) {
+            this.matTooltip.tooltipClass = 'bottom-arrow';
+          } else {
+            this.matTooltip.tooltipClass = 'top-arrow';
+          }
+        }
+      }, 0);
+    }
+  }
+}