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');
+    }
 }
diff --git a/ui/src/app/shared/directive/info-label.directive.spec.ts b/ui/src/app/shared/directive/info-label.directive.spec.ts
deleted file mode 100644
index e1e6d5b59..000000000
--- a/ui/src/app/shared/directive/info-label.directive.spec.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Component, DebugElement, ElementRef } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { NgbPopover, NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
-
-import { InfoLabelDirective } from './info-label.directive';
-import * as utility from '../../../testing/utility';
-
-
-@Component({
-    template: `<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                [ngbPopover]="tooltipName"></i>`
-})
-class TestComponent {
-    tooltipName = 'Foobar!';
-}
-
-describe('Info Label Directive', () => {
-    let component: TestComponent;
-    let fixture: ComponentFixture<TestComponent>;
-    let element: DebugElement;
-    let config: NgbPopover;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            providers: [NgbPopover, NgbPopoverConfig],
-            imports: [
-                NgbPopoverModule
-            ],
-            declarations: [
-                InfoLabelDirective,
-                TestComponent
-            ],
-        });
-
-        fixture = TestBed.createComponent(TestComponent);
-        element = fixture.debugElement.query(By.css('i.info-icon'));
-        config = element.injector.get(NgbPopover);
-        fixture.detectChanges();
-    });
-
-    describe('functions', () => {
-        it('should compile', () => {
-            expect(element).toBeDefined();
-        });
-        it('should call the config open method when spacebar is pressed', () => {
-            spyOn(config, 'open');
-            utility.dispatchKeyboardEvent(element.nativeElement, 'keydown', 'space');
-            fixture.detectChanges();
-            expect(config.open).toHaveBeenCalled();
-        });
-        it('should call the config close method when spacebar is released', () => {
-            spyOn(config, 'close');
-            utility.dispatchKeyboardEvent(element.nativeElement, 'keyup', 'space');
-            fixture.detectChanges();
-            expect(config.close).toHaveBeenCalled();
-        });
-    });
-});
diff --git a/ui/src/app/shared/directive/info-label.directive.ts b/ui/src/app/shared/directive/info-label.directive.ts
deleted file mode 100644
index 893bd139d..000000000
--- a/ui/src/app/shared/directive/info-label.directive.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Directive, ElementRef, Input, HostListener } from '@angular/core';
-import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
-
-/* tslint:disable:directive-selector */
-@Directive({
-    selector: '.info-icon',
-    providers: [NgbPopover]
-})
-export class InfoLabelDirective {
-    @HostListener('keydown.space') onSpaceDown() {
-        this.config.open();
-    }
-    @HostListener('keyup.space') onSpaceUp() {
-        this.config.close();
-    }
-    constructor(
-        private config: NgbPopover,
-        private element: ElementRef
-    ) {
-        config.triggers = 'mouseenter:mouseleave';
-        config.placement = ['top', 'left'];
-        config.container = 'body';
-        element.nativeElement.setAttribute('tabindex', 0);
-    }
-}
diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
index 20792a8aa..e033083a0 100644
--- a/ui/src/app/shared/shared.module.ts
+++ b/ui/src/app/shared/shared.module.ts
@@ -6,7 +6,6 @@ import { AutoCompleteComponent } from './autocomplete/autocomplete.component';
 import { ValidationClassDirective } from './validation/validation-class.directive';
 import { InputDefaultsDirective } from './directive/input-defaults.directive';
 import { ValidFormIconComponent } from './component/valid-form-icon.component';
-import { InfoLabelDirective } from './directive/info-label.directive';
 import { PrettyXml } from './pipe/pretty-xml.pipe';
 import { ToggleSwitchComponent } from './switch/switch.component';
 import { ContenteditableDirective } from './contenteditable/contenteditable.directive';
@@ -31,7 +30,6 @@ import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
         ValidationClassDirective,
         InputDefaultsDirective,
         ValidFormIconComponent,
-        InfoLabelDirective,
         PrettyXml,
         ReplacePipe,
         CustomDatePipe,
@@ -48,7 +46,6 @@ import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
         InputDefaultsDirective,
         ValidFormIconComponent,
         ValidationClassDirective,
-        InfoLabelDirective,
         ContenteditableDirective,
         ReplacePipe,
         CustomDatePipe,