diff --git a/backend/src/main/resources/i18n/messages_en.properties b/backend/src/main/resources/i18n/messages_en.properties
index 6d64dd72a..964ef0e77 100644
--- a/backend/src/main/resources/i18n/messages_en.properties
+++ b/backend/src/main/resources/i18n/messages_en.properties
@@ -400,7 +400,7 @@ tooltip.authentication-methods-to-use=Authentication Methods to Use
 tooltip.ignore-auth-method=Ignore any SP-Requested Authentication Method
 tooltip.omit-not-before-condition=Omit Not Before Condition
 tooltip.responder-id=ResponderId
-tooltip.instruction=Information icon - press spacebar to read additional information for this form field
+tooltip.instruction=Information icon
 tooltip.attribute-release-table=Attribute release table - select the attributes you want to release (default unchecked)
 tooltip.metadata-filter-name=Metadata Filter Name
 tooltip.metadata-filter-type=Metadata Filter Type
diff --git a/ui/src/app/shared/component/info-icon.component.html b/ui/src/app/shared/component/info-icon.component.html
index 58c70b2db..38dee05bd 100644
--- a/ui/src/app/shared/component/info-icon.component.html
+++ b/ui/src/app/shared/component/info-icon.component.html
@@ -1,12 +1,14 @@
 <ng-template #tooltipContent>
-    <span #content>{{ description }}</span>
+    <span #content [attr.aria-label]="description" [id]="id">{{ description }}</span>
 </ng-template>
 <button class="btn btn-nostyle info-icon"
     #toggle="ngbPopover"
     [attr.aria-label]="'tooltip.instruction' | translate"
-    [attr.aria-expanded]="toggle.isOpen()"
     [ngbPopover]="tooltipContent"
-    aria-haspopup="true">
+    [triggers]="triggers"
+    [placement]="placement"
+    [attr.aria-flowto]="id"
+    role="tooltip">
     <i class="fa fa-fw fa-info-circle text-primary fa-lg"></i>
     <span class="sr-only" translate="tooltip.instruction"></span>
-</button>
\ No newline at end of file
+</button>
diff --git a/ui/src/app/shared/component/info-icon.component.ts b/ui/src/app/shared/component/info-icon.component.ts
index d5a7fb207..5c340b410 100644
--- a/ui/src/app/shared/component/info-icon.component.ts
+++ b/ui/src/app/shared/component/info-icon.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, Renderer } from '@angular/core';
+import { NgbPopover, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
     selector: 'info-icon',
@@ -8,4 +9,18 @@ import { Component, Input, ChangeDetectionStrategy, ElementRef, ViewChild } from
 })
 export class InfoIconComponent {
     @Input() description: string;
+
+    id: string = String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now().toString();
+
+    triggers = 'mouseenter:mouseleave focus:blur';
+    container = 'body';
+    placement = ['top'];
+
+    constructor(
+        private renderer: Renderer
+    ) { }
+    focus(element): void {
+        console.log(element.elementRef.nativeElement);
+        this.renderer.invokeElementMethod(element.elementRef.nativeElement, 'focus');
+    }
 }