From 4cb77c3f3b638c75f7ae0e9c920dffb1e7014e68 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Mon, 1 Oct 2018 14:10:19 -0700
Subject: [PATCH] SHIBUI-871 SHIBUI-869 SHIBUI-873 Fixed a11y issues

---
 ui/package-lock.json                          | 559 +++++++++++++++++-
 ui/package.json                               |   2 +-
 .../forms/advanced-info-form.component.html   |  58 +-
 .../advanced-info-form.component.spec.ts      |   7 +-
 .../forms/assertion-form.component.html       |  21 +-
 .../forms/assertion-form.component.spec.ts    |   5 +-
 .../attribute-release-form.component.spec.ts  |   5 +-
 .../forms/descriptor-info-form.component.html |  22 +-
 .../descriptor-info-form.component.spec.ts    |   6 +-
 .../forms/finish-form.component.html          |   7 +-
 .../forms/finish-form.component.spec.ts       |   4 +-
 .../forms/key-info-form.component.html        |  43 +-
 .../forms/key-info-form.component.spec.ts     |   5 +-
 .../forms/logout-form.component.html          |  16 +-
 .../forms/logout-form.component.spec.ts       |   6 +-
 .../forms/metadata-ui-form.component.html     |  58 +-
 .../forms/metadata-ui-form.component.spec.ts  |   5 +-
 .../organization-info-form.component.html     |  43 +-
 .../organization-info-form.component.spec.ts  |   5 +-
 .../forms/relying-party-form.component.html   | 107 +---
 .../relying-party-form.component.spec.ts      |   6 +-
 ui/src/app/metadata/domain/component/index.ts |   3 +-
 ...dashboard-providers-list.component.spec.ts |   3 +-
 ...dashboard-resolvers-list.component.spec.ts |   3 +-
 ui/src/app/metadata/manager/manager.module.ts |   3 +-
 .../resolver/container/editor.component.ts    |   2 +-
 .../widget/array/array.component.html         |   6 +-
 .../boolean-radio.component.html              |   8 +-
 .../widget/check/checkbox.component.html      |   6 +-
 .../widget/datalist/datalist.component.html   |   8 +-
 .../filter-target.component.html              |  15 +-
 .../widget/number/number.component.html       |   7 +-
 .../widget/select/select.component.html       |   7 +-
 .../widget/string/string.component.html       |   7 +-
 .../widget/textarea/textarea.component.html   |   7 +-
 .../autocomplete.component.spec.ts            |   2 -
 .../shared/component/info-icon.component.html |  12 +
 .../shared/component/info-icon.component.scss |  13 +
 .../shared/component/info-icon.component.ts   |  11 +
 .../shared/directive/info-label.directive.ts  |   2 +-
 ui/src/app/shared/shared.module.ts            |  11 +-
 ui/src/testing/modal.stub.ts                  |   3 +-
 ui/src/testing/shared.stub.ts                 |  68 +++
 43 files changed, 786 insertions(+), 411 deletions(-)
 create mode 100644 ui/src/app/shared/component/info-icon.component.html
 create mode 100644 ui/src/app/shared/component/info-icon.component.scss
 create mode 100644 ui/src/app/shared/component/info-icon.component.ts
 create mode 100644 ui/src/testing/shared.stub.ts

diff --git a/ui/package-lock.json b/ui/package-lock.json
index c3b83f2ca..4850aa82f 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -183,6 +183,7 @@
             "anymatch": "2.0.0",
             "async-each": "1.0.1",
             "braces": "2.3.2",
+            "fsevents": "1.2.4",
             "glob-parent": "3.1.0",
             "inherits": "2.0.3",
             "is-binary-path": "1.0.1",
@@ -525,6 +526,7 @@
             "anymatch": "2.0.0",
             "async-each": "1.0.1",
             "braces": "2.3.2",
+            "fsevents": "1.2.4",
             "glob-parent": "3.1.0",
             "inherits": "2.0.3",
             "is-binary-path": "1.0.1",
@@ -922,6 +924,7 @@
             "anymatch": "2.0.0",
             "async-each": "1.0.1",
             "braces": "2.3.2",
+            "fsevents": "1.2.4",
             "glob-parent": "3.1.0",
             "inherits": "2.0.3",
             "is-binary-path": "1.0.1",
@@ -1339,9 +1342,19 @@
       }
     },
     "@ng-bootstrap/ng-bootstrap": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.1.2.tgz",
-      "integrity": "sha512-lPB4WdFk3s4k1OMKiZsmbxSE3r8qBFapov0HudEVi8HYkm6LBxZmWqy9I6KAC9NnhVUVIYnCixvRSNwOQvIwwA=="
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-3.2.2.tgz",
+      "integrity": "sha512-LdC08mKVJpDvu0wdMJXFql2KmLdESiSBXKXYt7j1JDExtPk0inNxNjdY3mhE2I3RFpEeXNcI6/pPkAlk/unwzw==",
+      "requires": {
+        "tslib": "1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
+          "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
+        }
+      }
     },
     "@ngrx/effects": {
       "version": "5.2.0",
@@ -1462,6 +1475,7 @@
             "anymatch": "2.0.0",
             "async-each": "1.0.1",
             "braces": "2.3.2",
+            "fsevents": "1.2.4",
             "glob-parent": "3.1.0",
             "inherits": "2.0.3",
             "is-binary-path": "1.0.1",
@@ -2797,6 +2811,7 @@
       "requires": {
         "anymatch": "1.3.2",
         "async-each": "1.0.1",
+        "fsevents": "1.2.4",
         "glob-parent": "2.0.0",
         "inherits": "2.0.3",
         "is-binary-path": "1.0.1",
@@ -4621,6 +4636,535 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true
     },
+    "fsevents": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.4.tgz",
+      "integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "nan": "2.11.1",
+        "node-pre-gyp": "0.10.0"
+      },
+      "dependencies": {
+        "abbrev": {
+          "version": "1.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "ansi-regex": {
+          "version": "2.1.1",
+          "bundled": true,
+          "dev": true
+        },
+        "aproba": {
+          "version": "1.2.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "are-we-there-yet": {
+          "version": "1.1.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "delegates": "1.0.0",
+            "readable-stream": "2.3.6"
+          }
+        },
+        "balanced-match": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true
+        },
+        "brace-expansion": {
+          "version": "1.1.11",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "balanced-match": "1.0.0",
+            "concat-map": "0.0.1"
+          }
+        },
+        "chownr": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "code-point-at": {
+          "version": "1.1.0",
+          "bundled": true,
+          "dev": true
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "bundled": true,
+          "dev": true
+        },
+        "console-control-strings": {
+          "version": "1.1.0",
+          "bundled": true,
+          "dev": true
+        },
+        "core-util-is": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "debug": {
+          "version": "2.6.9",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "deep-extend": {
+          "version": "0.5.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "delegates": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "detect-libc": {
+          "version": "1.0.3",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "fs-minipass": {
+          "version": "1.2.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "minipass": "2.2.4"
+          }
+        },
+        "fs.realpath": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "gauge": {
+          "version": "2.7.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "aproba": "1.2.0",
+            "console-control-strings": "1.1.0",
+            "has-unicode": "2.0.1",
+            "object-assign": "4.1.1",
+            "signal-exit": "3.0.2",
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wide-align": "1.1.2"
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "has-unicode": {
+          "version": "2.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "iconv-lite": {
+          "version": "0.4.21",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safer-buffer": "2.1.2"
+          }
+        },
+        "ignore-walk": {
+          "version": "3.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "minimatch": "3.0.4"
+          }
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "once": "1.4.0",
+            "wrappy": "1.0.2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "bundled": true,
+          "dev": true
+        },
+        "ini": {
+          "version": "1.3.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "brace-expansion": "1.1.11"
+          }
+        },
+        "minimist": {
+          "version": "0.0.8",
+          "bundled": true,
+          "dev": true
+        },
+        "minipass": {
+          "version": "2.2.4",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.1.1",
+            "yallist": "3.0.2"
+          }
+        },
+        "minizlib": {
+          "version": "1.1.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "minipass": "2.2.4"
+          }
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "minimist": "0.0.8"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "needle": {
+          "version": "2.2.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "debug": "2.6.9",
+            "iconv-lite": "0.4.21",
+            "sax": "1.2.4"
+          }
+        },
+        "node-pre-gyp": {
+          "version": "0.10.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "detect-libc": "1.0.3",
+            "mkdirp": "0.5.1",
+            "needle": "2.2.0",
+            "nopt": "4.0.1",
+            "npm-packlist": "1.1.10",
+            "npmlog": "4.1.2",
+            "rc": "1.2.7",
+            "rimraf": "2.6.2",
+            "semver": "5.5.0",
+            "tar": "4.4.1"
+          }
+        },
+        "nopt": {
+          "version": "4.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "abbrev": "1.1.1",
+            "osenv": "0.1.5"
+          }
+        },
+        "npm-bundled": {
+          "version": "1.0.3",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "npm-packlist": {
+          "version": "1.1.10",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ignore-walk": "3.0.1",
+            "npm-bundled": "1.0.3"
+          }
+        },
+        "npmlog": {
+          "version": "4.1.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "are-we-there-yet": "1.1.4",
+            "console-control-strings": "1.1.0",
+            "gauge": "2.7.4",
+            "set-blocking": "2.0.0"
+          }
+        },
+        "number-is-nan": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "once": {
+          "version": "1.4.0",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "wrappy": "1.0.2"
+          }
+        },
+        "os-homedir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "os-tmpdir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "osenv": {
+          "version": "0.1.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "os-homedir": "1.0.2",
+            "os-tmpdir": "1.0.2"
+          }
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "rc": {
+          "version": "1.2.7",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "deep-extend": "0.5.1",
+            "ini": "1.3.5",
+            "minimist": "1.2.0",
+            "strip-json-comments": "2.0.1"
+          },
+          "dependencies": {
+            "minimist": {
+              "version": "1.2.0",
+              "bundled": true,
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "readable-stream": {
+          "version": "2.3.6",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.1.1",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "rimraf": {
+          "version": "2.6.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "glob": "7.1.2"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.1",
+          "bundled": true,
+          "dev": true
+        },
+        "safer-buffer": {
+          "version": "2.1.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "sax": {
+          "version": "1.2.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "semver": {
+          "version": "5.5.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "set-blocking": {
+          "version": "2.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "signal-exit": {
+          "version": "3.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "tar": {
+          "version": "4.4.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chownr": "1.0.1",
+            "fs-minipass": "1.2.5",
+            "minipass": "2.2.4",
+            "minizlib": "1.1.0",
+            "mkdirp": "0.5.1",
+            "safe-buffer": "5.1.1",
+            "yallist": "3.0.2"
+          }
+        },
+        "util-deprecate": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "wide-align": {
+          "version": "1.1.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "string-width": "1.0.2"
+          }
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true
+        },
+        "yallist": {
+          "version": "3.0.2",
+          "bundled": true,
+          "dev": true
+        }
+      }
+    },
     "fstream": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
@@ -7346,6 +7890,13 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
+    "nan": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.1.tgz",
+      "integrity": "sha512-iji6k87OSXa0CcrLl9z+ZiYSuR2o+c0bGuNmXdrhTQTakxytAFsC56SArGYoiHlJlFoHSnvmhpceZJaXkVuOtA==",
+      "dev": true,
+      "optional": true
+    },
     "nanomatch": {
       "version": "1.2.9",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.9.tgz",
@@ -11056,6 +11607,7 @@
             "anymatch": "2.0.0",
             "async-each": "1.0.1",
             "braces": "2.3.2",
+            "fsevents": "1.2.4",
             "glob-parent": "3.1.0",
             "inherits": "2.0.3",
             "is-binary-path": "1.0.1",
@@ -11903,6 +12455,7 @@
             "anymatch": "2.0.0",
             "async-each": "1.0.1",
             "braces": "2.3.2",
+            "fsevents": "1.2.4",
             "glob-parent": "3.1.0",
             "inherits": "2.0.3",
             "is-binary-path": "1.0.1",
diff --git a/ui/package.json b/ui/package.json
index d89f39898..b02a3f394 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -23,7 +23,7 @@
     "@angular/platform-browser": "^6.0.2",
     "@angular/platform-browser-dynamic": "^6.0.2",
     "@angular/router": "^6.0.2",
-    "@ng-bootstrap/ng-bootstrap": "^1.1.2",
+    "@ng-bootstrap/ng-bootstrap": "^3.2.2",
     "@ngrx/effects": "^5.2.0",
     "@ngrx/entity": "^5.2.0",
     "@ngrx/router-store": "^5.2.0",
diff --git a/ui/src/app/metadata/domain/component/forms/advanced-info-form.component.html b/ui/src/app/metadata/domain/component/forms/advanced-info-form.component.html
index 50c608d33..e7e9399bb 100644
--- a/ui/src/app/metadata/domain/component/forms/advanced-info-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/advanced-info-form.component.html
@@ -10,12 +10,7 @@
                         </span>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipServiceProviderNameDashboardDisplayOnly>
-                            <translate-i18n key="tooltip.service-provider-name-dashboard-display-only">Service Provider Name (Dashboard Display Only) popover</translate-i18n>
-                        </ng-template>
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                           [ngbPopover]="tooltipServiceProviderNameDashboardDisplayOnly"
-                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'tooltip.service-provider-name-dashboard-display-only' | translate"></info-icon>
                     </span>
                 </div>
                 <input type="text"
@@ -34,12 +29,7 @@
                         </span>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipServiceProviderEntityID>
-                            <translate-i18n key="tooltip.service-provider-entity-id">Service Provider Entity ID popover</translate-i18n>
-                        </ng-template>
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                           [ngbPopover]="tooltipServiceProviderEntityID"
-                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'tooltip.service-provider-entity-id' | translate"></info-icon>
                     </span>
                 </div>
                 <input type="text"
@@ -67,12 +57,7 @@
                             </span>
                         </label>
                         <span class="col-sm-2 text-right">
-                            <ng-template #tooltipOrganizationName>
-                                <translate-i18n key="tooltip.organization-name">Organization Name popover</translate-i18n>
-                            </ng-template>
-                            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                               [ngbPopover]="tooltipOrganizationName"
-                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                            <info-icon [description]="'tooltip.organization-name' | translate"></info-icon>
                         </span>
                     </div>
                     <input type="text"
@@ -91,12 +76,7 @@
                             </span>
                         </label>
                         <span class="col-sm-2 text-right">
-                            <ng-template #tooltipOrganizationDisplayName>
-                                <translate-i18n key="tooltip.organization-display-name">Organization Display Name popover</translate-i18n>
-                            </ng-template>
-                            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                               [ngbPopover]="tooltipOrganizationDisplayName"
-                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                            <info-icon [description]="'tooltip.organization-display-name' | translate"></info-icon>
                         </span>
                     </div>
                     <input type="text"
@@ -115,12 +95,7 @@
                             </span>
                         </label>
                         <span class="col-sm-2 text-right">
-                            <ng-template #tooltipOrganizationURL>
-                                <translate-i18n key="tooltip.organization-url">Organization URL popover</translate-i18n>
-                            </ng-template>
-                            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                               [ngbPopover]="tooltipOrganizationURL"
-                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                            <info-icon [description]="'tooltip.organization-url' | translate"></info-icon>
                         </span>
                     </div>
                     <input type="text"
@@ -175,13 +150,7 @@
                                                 <translate-i18n key="label.name">Name</translate-i18n>
                                             </label>
                                             <span class="col-sm-3 text-right">
-                                                <ng-template #tooltipName>
-                                                    <translate-i18n key="tooltip.name">Name popover</translate-i18n>
-                                                </ng-template>
-                                                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                                   [ngbPopover]="tooltipName"
-                                                  
-                                                   [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                                <info-icon [description]="'tooltip.name' | translate"></info-icon>
                                             </span>
                                         </div>
                                         <input [id]="'name' + i"
@@ -200,13 +169,7 @@
                                                 <translate-i18n key="label.type">Type</translate-i18n>
                                             </label>
                                             <span class="col-sm-3 text-right">
-                                                <ng-template #tooltipType>
-                                                    <translate-i18n key="tooltip.type">Type popover</translate-i18n>
-                                                </ng-template>
-                                                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                                   [ngbPopover]="tooltipType"
-                                                  
-                                                   [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                                <info-icon [description]="'tooltip.type' | translate"></info-icon>
                                             </span>
                                         </div>
                                         <select [id]="'type-' + i" class="form-control" formControlName="type" aria-label="Contact type dropdown" role="listbox">
@@ -225,12 +188,7 @@
                                                 <translate-i18n key="label.email-address">Email Address</translate-i18n>
                                             </label>
                                             <span class="col-sm-2 text-right">
-                                                <ng-template #tooltipEmailAddress>
-                                                    <translate-i18n key="tooltip.email-address">Email Address popover</translate-i18n>
-                                                </ng-template>
-                                            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                               [ngbPopover]="tooltipEmailAddress"
-                                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                                <info-icon [description]="'tooltip.email-address' | translate"></info-icon>
                                             </span>
                                         </div>
                                         <input type="email"
diff --git a/ui/src/app/metadata/domain/component/forms/advanced-info-form.component.spec.ts b/ui/src/app/metadata/domain/component/forms/advanced-info-form.component.spec.ts
index a3006e970..424b4d2d2 100644
--- a/ui/src/app/metadata/domain/component/forms/advanced-info-form.component.spec.ts
+++ b/ui/src/app/metadata/domain/component/forms/advanced-info-form.component.spec.ts
@@ -2,13 +2,14 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ViewChild, Component } from '@angular/core';
-import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
+import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 import { Observable, of } from 'rxjs';
 import { ProviderValueEmitter, ProviderStatusEmitter } from '../../../domain/service/provider-change-emitter.service';
 import { AdvancedInfoFormComponent } from './advanced-info-form.component';
 import * as stubs from '../../../../../testing/resolver.stub';
 import { FileBackedHttpMetadataResolver } from '../../entity';
 import { MockI18nModule } from '../../../../../testing/i18n.stub';
+import { MockSharedModule } from '../../../../../testing/shared.stub';
 
 @Component({
     template: `<adv-info-form [resolver]="resolver" [ids]="ids$"></adv-info-form>`
@@ -51,8 +52,8 @@ describe('Advanced Info Form Component', () => {
             imports: [
                 NoopAnimationsModule,
                 ReactiveFormsModule,
-                NgbPopoverModule,
-                MockI18nModule
+                MockI18nModule,
+                MockSharedModule
             ],
             declarations: [
                 AdvancedInfoFormComponent,
diff --git a/ui/src/app/metadata/domain/component/forms/assertion-form.component.html b/ui/src/app/metadata/domain/component/forms/assertion-form.component.html
index 7433c7711..8cf76147a 100644
--- a/ui/src/app/metadata/domain/component/forms/assertion-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/assertion-form.component.html
@@ -45,12 +45,7 @@
                                         <translate-i18n key="label.assertion-consumer-services-location">Assertion Consumer Service Location</translate-i18n>
                                     </label>
                                     <span class="col-sm-2 text-right">
-                                        <ng-template #tooltipAssertionConsumerServiceLocation>
-                                            <translate-i18n key="tooltip.assertion-consumer-service-location">Assertion Consumer Service Location popover</translate-i18n>
-                                        </ng-template>
-                                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                           [ngbPopover]="tooltipAssertionConsumerServiceLocation"
-                                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                        <info-icon [description]="'tooltip.assertion-consumer-service-location' | translate"></info-icon>
                                     </span>
                                 </div>
                                 <input [id]="'location-' + i" type="text" class="form-control" placeholder="" formControlName="locationUrl" aria-label="Assertion consumer service endpoint location" role="textbox" />
@@ -66,12 +61,7 @@
                                                 <translate-i18n key="label.assertion-consumer-service-location-binding">Assertion Consumer Service Location Binding</translate-i18n>
                                             </label>
                                             <span class="col-sm-2 text-right">
-                                                <ng-template #tooltipAssertionConsumerServiceLocationBinding>
-                                                    <translate-i18n key="tooltip.assertion-consumer-service-location-binding">Assertion Consumer Service Location Binding</translate-i18n>
-                                                </ng-template>
-                                            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                               [ngbPopover]="tooltipAssertionConsumerServiceLocationBinding"
-                                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                                <info-icon [description]="'tooltip.assertion-consumer-service-location-binding' | translate"></info-icon>
                                             </span>
                                         </div>
                                         <select [id]="'binding-' + i" class="form-control" formControlName="binding" role="listbox" aria-label="Assertion consumer service location binding type">
@@ -87,12 +77,7 @@
                                         <fieldset aria-label="Mark this assertion consumer service endpoint as the default?">
                                             <label class="d-block">
                                                 <translate-i18n key="label.mark-as-default">Mark as Default</translate-i18n>
-                                                <ng-template #tooltipMarkAsDefault>
-                                                    <translate-i18n key="tooltip.mark-as-default">Mark as Default</translate-i18n>
-                                                </ng-template>
-                                                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                                   [ngbPopover]="tooltipMarkAsDefault"
-                                                   [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                                <info-icon [description]="'tooltip.mark-as-default' | translate"></info-icon>
                                             </label>
                                             <div class="custom-control custom-checkbox custom-control-inline">
                                                 <input type="checkbox"
diff --git a/ui/src/app/metadata/domain/component/forms/assertion-form.component.spec.ts b/ui/src/app/metadata/domain/component/forms/assertion-form.component.spec.ts
index 9cf43ca2e..fafa644c2 100644
--- a/ui/src/app/metadata/domain/component/forms/assertion-form.component.spec.ts
+++ b/ui/src/app/metadata/domain/component/forms/assertion-form.component.spec.ts
@@ -2,10 +2,11 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ProviderValueEmitter, ProviderStatusEmitter } from '../../../domain/service/provider-change-emitter.service';
-import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
+import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 import { AssertionFormComponent } from './assertion-form.component';
 import * as stubs from '../../../../../testing/resolver.stub';
 import { MockI18nModule } from '../../../../../testing/i18n.stub';
+import { MockSharedModule } from '../../../../../testing/shared.stub';
 
 describe('Assertion Form Component', () => {
     let fixture: ComponentFixture<AssertionFormComponent>;
@@ -21,7 +22,7 @@ describe('Assertion Form Component', () => {
             imports: [
                 NoopAnimationsModule,
                 ReactiveFormsModule,
-                NgbPopoverModule,
+                MockSharedModule,
                 MockI18nModule
             ],
             declarations: [
diff --git a/ui/src/app/metadata/domain/component/forms/attribute-release-form.component.spec.ts b/ui/src/app/metadata/domain/component/forms/attribute-release-form.component.spec.ts
index c05e6bad3..9f9e3f04a 100644
--- a/ui/src/app/metadata/domain/component/forms/attribute-release-form.component.spec.ts
+++ b/ui/src/app/metadata/domain/component/forms/attribute-release-form.component.spec.ts
@@ -3,12 +3,13 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule, Store, combineReducers } from '@ngrx/store';
 import { ProviderValueEmitter, ProviderStatusEmitter } from '../../../domain/service/provider-change-emitter.service';
-import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
+import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 import { AttributeReleaseFormComponent } from './attribute-release-form.component';
 import { ListValuesService } from '../../../domain/service/list-values.service';
 import * as stubs from '../../../../../testing/resolver.stub';
 import { MockI18nModule } from '../../../../../testing/i18n.stub';
 import { MockListValueService } from '../../../../../testing/list-values.stub';
+import { MockSharedModule } from '../../../../../testing/shared.stub';
 
 describe('Attribute Release Form Component', () => {
     let fixture: ComponentFixture<AttributeReleaseFormComponent>;
@@ -25,7 +26,7 @@ describe('Attribute Release Form Component', () => {
             imports: [
                 NoopAnimationsModule,
                 ReactiveFormsModule,
-                NgbPopoverModule,
+                MockSharedModule,
                 MockI18nModule
             ],
             declarations: [
diff --git a/ui/src/app/metadata/domain/component/forms/descriptor-info-form.component.html b/ui/src/app/metadata/domain/component/forms/descriptor-info-form.component.html
index 23e3687ac..6aac2a7b4 100644
--- a/ui/src/app/metadata/domain/component/forms/descriptor-info-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/descriptor-info-form.component.html
@@ -7,12 +7,7 @@
                         <translate-i18n key="label.protocol-support-enumeration">Protocol Support Enumeration</translate-i18n>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipProtocolSupportEnumeration>
-                            <translate-i18n key="tooltip.protocol-support-enumeration">Protocol Support Enumeration popover</translate-i18n>
-                        </ng-template>
-                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                       [ngbPopover]="tooltipProtocolSupportEnumeration"
-                       [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'tooltip.protocol-support-enumeration' | translate"></info-icon>
                     </span>
                 </div>
                 <select id="protocolSupportEnum" class="form-control" formControlName="protocolSupportEnum" aria-label="Protocol support enumeration dropdown" role="listbox">
@@ -27,23 +22,20 @@
                         <button class="btn btn-success btn-sm" (click)="addFormat()" translate="action.add-nameid-format" role="button">Add NameID Format</button>
                     </span>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipNameIdFormat>
-                            <translate-i18n key="tooltip.nameid-format">Add NameID Format Popover</translate-i18n>
-                        </ng-template>
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                           [ngbPopover]="tooltipNameIdFormat"
-                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'tooltip.nameid-format' | translate"></info-icon>
                     </span>
                 </div>
             </div>
             <div formArrayName="nameIdFormats" class="form-group" *ngIf="nameIdFormats.length">
                 <div *ngFor="let format of nameIdFormats.controls; let i=index; let isLast=last" class="row">
-                    <div class="col">
-                        <label [for]="'nameIdFormat-' + i" class="sr-only">
-                            <translate-i18n key="label.nameid-format">NameID Format</translate-i18n> {{ i + 1 }}
+                    <div class="col mb-2 d-flex">
+                        <label [for]="'nameIdFormat-' + i" class="p-2">
+                            <translate-i18n key="label.nameid-format" class="sr-only">NameID Format</translate-i18n> {{ i + 1 }}.
                         </label>
                         <auto-complete
+                            class="flex-grow-1"
                             [id]="'nameIdFormat-' + i"
+                            [fieldId]="'nameIdFormat-' + i"
                             [formControlName]="i"
                             [matches]="nameIds$ | async"
                             [required]="true"
diff --git a/ui/src/app/metadata/domain/component/forms/descriptor-info-form.component.spec.ts b/ui/src/app/metadata/domain/component/forms/descriptor-info-form.component.spec.ts
index d902432fd..1481a0638 100644
--- a/ui/src/app/metadata/domain/component/forms/descriptor-info-form.component.spec.ts
+++ b/ui/src/app/metadata/domain/component/forms/descriptor-info-form.component.spec.ts
@@ -3,7 +3,7 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ProviderValueEmitter, ProviderStatusEmitter } from '../../../domain/service/provider-change-emitter.service';
-import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
+import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 import { ListValuesService } from '../../../domain/service/list-values.service';
 import { FileBackedHttpMetadataResolver } from '../../../domain/entity';
 import { DescriptorInfoFormComponent } from './descriptor-info-form.component';
@@ -12,6 +12,7 @@ import * as stubs from '../../../../../testing/resolver.stub';
 import { SharedModule } from '../../../../shared/shared.module';
 import { MockI18nModule } from '../../../../../testing/i18n.stub';
 import { MockListValueService } from '../../../../../testing/list-values.stub';
+import { MockSharedModule } from '../../../../../testing/shared.stub';
 
 @Component({
     template: `<descriptor-info-form [resolver]="resolver"></descriptor-info-form>`
@@ -54,8 +55,7 @@ describe('Descriptor Info Form Component', () => {
             imports: [
                 NoopAnimationsModule,
                 ReactiveFormsModule,
-                NgbPopoverModule,
-                SharedModule,
+                MockSharedModule,
                 MockI18nModule
             ],
             declarations: [
diff --git a/ui/src/app/metadata/domain/component/forms/finish-form.component.html b/ui/src/app/metadata/domain/component/forms/finish-form.component.html
index e8dab2e50..28b9dda91 100644
--- a/ui/src/app/metadata/domain/component/forms/finish-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/finish-form.component.html
@@ -9,12 +9,7 @@
                             translate="label.enable-this-service-opon-saving"
                             for="serviceEnabled">Enable this service upon saving?</label>
                     </div>
-                    <ng-template #tooltipEnableThisServiceUponSaving>
-                        <translate-i18n key="tooltip.enable-this-service-upon-saving">Enable this service upon saving popover</translate-i18n>
-                    </ng-template>
-                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                       [ngbPopover]="tooltipEnableThisServiceUponSaving"
-                       role="tooltip"></i>
+                    <info-icon [description]="'tooltip.enable-this-service-upon-saving' | translate"></info-icon>
                 </div>
             </section>
             <section class="entity-section">
diff --git a/ui/src/app/metadata/domain/component/forms/finish-form.component.spec.ts b/ui/src/app/metadata/domain/component/forms/finish-form.component.spec.ts
index 882590b2b..fd1fa6945 100644
--- a/ui/src/app/metadata/domain/component/forms/finish-form.component.spec.ts
+++ b/ui/src/app/metadata/domain/component/forms/finish-form.component.spec.ts
@@ -4,7 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ProviderValueEmitter, ProviderStatusEmitter } from '../../../domain/service/provider-change-emitter.service';
-import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
+import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 import { ListValuesService } from '../../../domain/service/list-values.service';
 import { FinishFormComponent } from './finish-form.component';
 import { RouterStub, RouterLinkStubDirective } from '../../../../../testing/router.stub';
@@ -15,6 +15,7 @@ import { FileBackedHttpMetadataResolver } from '../../entity';
 import { InputDefaultsDirective } from '../../../../shared/directive/input-defaults.directive';
 import { MockI18nModule } from '../../../../../testing/i18n.stub';
 import { MockListValueService } from '../../../../../testing/list-values.stub';
+import { MockSharedModule } from '../../../../../testing/shared.stub';
 
 @Component({
     template: `<finish-form [resolver]="resolver"></finish-form>`
@@ -50,6 +51,7 @@ describe('Finished Form Component', () => {
             imports: [
                 NoopAnimationsModule,
                 ReactiveFormsModule,
+                MockSharedModule,
                 NgbPopoverModule,
                 MockI18nModule
             ],
diff --git a/ui/src/app/metadata/domain/component/forms/key-info-form.component.html b/ui/src/app/metadata/domain/component/forms/key-info-form.component.html
index e4a9ea4d7..6222434db 100644
--- a/ui/src/app/metadata/domain/component/forms/key-info-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/key-info-form.component.html
@@ -8,12 +8,7 @@
                             <translate-i18n key="label.is-there-a-x509-certificate">Is there a X509 Certificate?</translate-i18n>
                         </label>&nbsp;
                         <span>
-                            <ng-template #tooltipIsThereAX509Certificate>
-                                <translate-i18n key="tooltip.authentication-requests-signed">Is there a X509 Certificate popover</translate-i18n>
-                            </ng-template>
-                            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                               [ngbPopover]="tooltipIsThereAX509Certificate"
-                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                            <info-icon [description]="'tooltip.authentication-requests-signed' | translate"></info-icon>
                         </span>
                     </div>
                     <div id="x509CertificateAvailableRadioGroup" role="radiogroup" aria-activedescendant="x509CertificateAvailableNo" tabindex="0">
@@ -37,12 +32,7 @@
                             <translate-i18n key="label.authentication-requests-signed">Authentication Requests Signed?</translate-i18n>
                         </label>&nbsp;
                         <span>
-                            <ng-template #tooltipAuthenticationRequestsSigned>
-                                <translate-i18n key="tooltip.authentication-requests-signed">Authentication Requests Signed popover</translate-i18n>
-                            </ng-template>
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                           [ngbPopover]="tooltipAuthenticationRequestsSigned"
-                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                            <info-icon [description]="'tooltip.authentication-requests-signed' | translate"></info-icon>
                         </span>
                     </div>
                     <div id="authenticationRequestsSignedRadioGroup" role="radiogroup" aria-activedescendant="authenticationRequestsSignedNo" tabindex="0">
@@ -66,12 +56,7 @@
                             <translate-i18n key="label.want-assertions-signed">Want Assertions Signed?</translate-i18n>
                         </label>&nbsp;
                         <span>
-                            <ng-template #tooltipWantAssertionsSigned>
-                                <translate-i18n key="tooltip.want-assertions-signed">Want Assertions Signed</translate-i18n>
-                            </ng-template>
-                            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                [ngbPopover]="tooltipWantAssertionsSigned"
-                                [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                            <info-icon [description]="'tooltip.want-assertions-signed' | translate"></info-icon>
                         </span>
                     </div>
                     <div id="wantAssertionsSignedRadioGroup" role="radiogroup" aria-activedescendant="wantAssertionsSignedNo" tabindex="0">
@@ -131,13 +116,7 @@
                                         </span>
                                     </label>
                                     <span class="col-sm-2 text-right">
-                                        <ng-template #tooltipCertificateName>
-                                            <translate-i18n key="tooltip.certificate-name">Certificate Name Popover</translate-i18n>
-                                        </ng-template>
-                                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                           [ngbPopover]="tooltipCertificateName"
-                                          
-                                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                        <info-icon [description]="'tooltip.certificate-name' | translate"></info-icon>
                                     </span>
                                 </div>
                                 <input [id]="'name-' + i" type="text" class="form-control" placeholder="" formControlName="name" aria-label="x509 certificate name" role="textbox" />
@@ -152,12 +131,7 @@
                                             </span>
                                         </label>
                                         <span class="col-sm-2 text-right">
-                                            <ng-template #tooltipCertificateType>
-                                                <translate-i18n key="tooltip.certificate-type">Certificate Type Popover</translate-i18n>
-                                            </ng-template>
-                                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                           [ngbPopover]="tooltipCertificateType"
-                                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                            <info-icon [description]="'tooltip.certificate-type' | translate"></info-icon>
                                         </span>
                                     </div>
                                     <div id="certTypeRadioGroup" role="radiogroup" tabindex="0">
@@ -180,12 +154,7 @@
                                         </span>
                                     </label>
                                     <span class="col-sm-2 text-right">
-                                        <ng-template #tooltipCertificateBody>
-                                            <translate-i18n key="tooltip.certificate">Certificate Popover</translate-i18n>
-                                        </ng-template>
-                                            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                               [ngbPopover]="tooltipCertificateBody"
-                                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                        <info-icon [description]="'tooltip.certificate' | translate"></info-icon>
                                     </span>
                                 </div>
                                 <textarea [id]="'cert-' + i" class="form-control" placeholder="" formControlName="value" rows="10" [disableDefaults]="true" role="textbox" aria-multiline="true"></textarea>
diff --git a/ui/src/app/metadata/domain/component/forms/key-info-form.component.spec.ts b/ui/src/app/metadata/domain/component/forms/key-info-form.component.spec.ts
index 0b6751cc3..bdb50a4ed 100644
--- a/ui/src/app/metadata/domain/component/forms/key-info-form.component.spec.ts
+++ b/ui/src/app/metadata/domain/component/forms/key-info-form.component.spec.ts
@@ -3,7 +3,7 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ProviderValueEmitter, ProviderStatusEmitter } from '../../../domain/service/provider-change-emitter.service';
-import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
+import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 import { ListValuesService } from '../../../domain/service/list-values.service';
 import { KeyInfoFormComponent } from './key-info-form.component';
 
@@ -12,6 +12,7 @@ import { FileBackedHttpMetadataResolver } from '../../entity';
 import { InputDefaultsDirective } from '../../../../shared/directive/input-defaults.directive';
 import { MockI18nModule } from '../../../../../testing/i18n.stub';
 import { MockListValueService } from '../../../../../testing/list-values.stub';
+import { MockSharedModule } from '../../../../../testing/shared.stub';
 
 @Component({
     template: `<key-info-form [resolver]="resolver"></key-info-form>`
@@ -49,7 +50,7 @@ describe('Security (Key) Info Form Component', () => {
             imports: [
                 NoopAnimationsModule,
                 ReactiveFormsModule,
-                NgbPopoverModule,
+                MockSharedModule,
                 MockI18nModule
             ],
             declarations: [
diff --git a/ui/src/app/metadata/domain/component/forms/logout-form.component.html b/ui/src/app/metadata/domain/component/forms/logout-form.component.html
index c8a73f3e6..cf1f091ba 100644
--- a/ui/src/app/metadata/domain/component/forms/logout-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/logout-form.component.html
@@ -36,13 +36,7 @@
                                         <translate-i18n key="label.url">URL</translate-i18n>
                                     </label>
                                     <span class="col-sm-2 text-right">
-                                        <ng-template #tooltipLogoutEndpointsUrl>
-                                            <translate-i18n key="tooltip.logout-endpoints-url">Logout Endpoints Url popover</translate-i18n>
-                                        </ng-template>
-                                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                           [ngbPopover]="tooltipLogoutEndpointsUrl"
-                                          
-                                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                        <info-icon [description]="'tooltip.logout-endpoints-url' | translate"></info-icon>
                                     </span>
                                 </div>
                                 <input [id]="'url-' + i" type="text" class="form-control" placeholder="" formControlName="url" aria-label="Logout endpoint URL" role="textbox" />
@@ -54,13 +48,7 @@
                                         <translate-i18n key="label.binding-types">Binding Type</translate-i18n>
                                     </label>
                                     <span class="col-sm-2 text-right">
-                                        <ng-template #tooltipLogoutEndpointsBindingType>
-                                            <translate-i18n key="tooltip.logout-endpoints-binding-type">Logout Endpoints Binding Type popover</translate-i18n>
-                                        </ng-template>
-                                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                       [ngbPopover]="tooltipLogoutEndpointsBindingType"
-                                      
-                                       [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                        <info-icon [description]="'tooltip.logout-endpoints-binding-type' | translate"></info-icon>
                                     </span>
                                 </div>
                                 <select [id]="'binding-' + i" class="form-control" formControlName="bindingType" aria-label="Logout binding type dropdown" role="listbox">
diff --git a/ui/src/app/metadata/domain/component/forms/logout-form.component.spec.ts b/ui/src/app/metadata/domain/component/forms/logout-form.component.spec.ts
index 89d8b9b09..dc13075a8 100644
--- a/ui/src/app/metadata/domain/component/forms/logout-form.component.spec.ts
+++ b/ui/src/app/metadata/domain/component/forms/logout-form.component.spec.ts
@@ -2,9 +2,8 @@ import { ViewChild, Component } from '@angular/core';
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule, Store, combineReducers } from '@ngrx/store';
 import { ProviderValueEmitter, ProviderStatusEmitter } from '../../../domain/service/provider-change-emitter.service';
-import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
+import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 import { ListValuesService } from '../../../domain/service/list-values.service';
 import { LogoutFormComponent } from './logout-form.component';
 
@@ -13,6 +12,7 @@ import { FileBackedHttpMetadataResolver } from '../../entity';
 import { InputDefaultsDirective } from '../../../../shared/directive/input-defaults.directive';
 import { MockI18nModule } from '../../../../../testing/i18n.stub';
 import { MockListValueService } from '../../../../../testing/list-values.stub';
+import { MockSharedModule } from '../../../../../testing/shared.stub';
 
 @Component({
     template: `<logout-form [resolver]="resolver"></logout-form>`
@@ -47,7 +47,7 @@ describe('Logout Endpoints Form Component', () => {
             imports: [
                 NoopAnimationsModule,
                 ReactiveFormsModule,
-                NgbPopoverModule,
+                MockSharedModule,
                 MockI18nModule
             ],
             declarations: [
diff --git a/ui/src/app/metadata/domain/component/forms/metadata-ui-form.component.html b/ui/src/app/metadata/domain/component/forms/metadata-ui-form.component.html
index 5974ba6ac..e75ce8b7b 100644
--- a/ui/src/app/metadata/domain/component/forms/metadata-ui-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/metadata-ui-form.component.html
@@ -7,13 +7,7 @@
                         <translate-i18n key="label.display-name">Display Name</translate-i18n>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipMDUIDisplayName>
-                            <translate-i18n key="tooltip.mdui-display-name">Typically, the IdP Display Name field will be presented on IdP discovery service interfaces.</translate-i18n>
-                        </ng-template>
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                           [ngbPopover]="tooltipMDUIDisplayName"
-                          
-                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'tooltip.mdui-display-name' | translate"></info-icon>
                     </span>
                 </div>
                 <input id="displayName" type="text" class="form-control" placeholder="" formControlName="displayName" role="textbox" />
@@ -24,14 +18,7 @@
                         <translate-i18n key="label.information-url">Information URL</translate-i18n>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipMDUIInformationUrl>
-                            <translate-i18n key="tooltip.mdui-information-url">The IdP Information URL is a link to a comprehensive information page about the IdP. This page should expand on the
-                            content of the IdP Description field.</translate-i18n>
-                        </ng-template>
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                           [ngbPopover]="tooltipMDUIInformationUrl"
-                          
-                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'tooltip.mdui-information-url' | translate"></info-icon>
                     </span>
                 </div>
                 <input id="informationUrl" type="text" class="form-control" placeholder="" formControlName="informationUrl" role="textbox" />
@@ -43,15 +30,7 @@
                         <translate-i18n key="label.description">Description</translate-i18n>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipMDUIDescription>
-                            <translate-i18n key="tooltip.mdui-description">The IdP Description is a brief description of the IdP service. On a well-designed discovery interface, the IdP
-                            Description will be presented to the user in addition to the IdP Display Name, and so the IdP Description helps
-                            disambiguate duplicate or similar IdP Display Names.</translate-i18n>
-                        </ng-template>
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                           [ngbPopover]="tooltipMDUIDescription"
-                          
-                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'tooltip.mdui-description' | translate"></info-icon>
                     </span>
                 </div>
                 <textarea id="description"
@@ -77,13 +56,7 @@
                         <translate-i18n key="label.privacy-statement-url">Privacy Statement URL</translate-i18n>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipMDUIPrivacyStatementUrl>
-                            <translate-i18n key="tooltip.mdui-privacy-statement-url">The IdP Privacy Statement URL is a link to the IdP's Privacy Statement. The content of the Privacy Statement should be
-                            targeted at end users.</translate-i18n>
-                        </ng-template>
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                           [ngbPopover]="tooltipMDUIPrivacyStatementUrl"
-                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'tooltip.mdui-privacy-statement-url' | translate"></info-icon>
                     </span>
                 </div>
                 <input id="privacyStatementUrl" type="text" class="form-control" placeholder="" formControlName="privacyStatementUrl" role="textbox" />
@@ -95,13 +68,7 @@
                         <translate-i18n key="label.logo-url">Logo URL</translate-i18n>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipMDUILogoUrl>
-                            <translate-i18n key="tooltip.mdui-logo-url">The IdP Logo URL in metadata points to an image file on a remote server. A discovery service, for example, may rely on
-                            a visual cue (i.e., a logo) instead of or in addition to the IdP Display Name.</translate-i18n>
-                        </ng-template>
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                           [ngbPopover]="tooltipMDUILogoUrl"
-                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'tooltip.mdui-logo-url' | translate"></info-icon>
                     </span>
                 </div>
                 <input id="logoUrl" type="text" class="form-control" placeholder="" formControlName="logoUrl" role="textbox" />
@@ -115,12 +82,7 @@
                                 <translate-i18n key="label.logo-width">Logo Width</translate-i18n>
                             </label>
                             <span class="col-sm-2 text-right">
-                                <ng-template #tooltipMDUILogoWidth>
-                                    <translate-i18n key="tooltip.mdui-logo-width">The logo should have a minimum width of 100 pixels</translate-i18n>
-                                </ng-template>
-                                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                   [ngbPopover]="tooltipMDUILogoUrl"
-                                   [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                <info-icon [description]="'tooltip.mdui-logo-width' | translate"></info-icon>
                             </span>
                         </div>
                         <input id="logoWidth" type="number" class="form-control" placeholder="" formControlName="logoWidth" step="1" role="textbox" />
@@ -134,13 +96,7 @@
                                 <translate-i18n key="label.logo-height">Logo Height</translate-i18n>
                             </label>
                             <span class="col-sm-2 text-right">
-                                <ng-template #tooltipMDUILogoHeight>
-                                    <translate-i18n key="tooltip.mdui-logo-height">The logo should have a minimum height of 75 pixels and a maximum height of 150 pixels (or the application will scale it
-                                    proportionally)</translate-i18n>
-                                </ng-template>
-                                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                   [ngbPopover]="tooltipMDUILogoHeight"
-                                   [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                <info-icon [description]="'tooltip.mdui-logo-height' | translate"></info-icon>
                             </span>
                         </div>
                         <input id="logoHeight" type="number" class="form-control" placeholder="" formControlName="logoHeight" step="1" role="textbox" />
diff --git a/ui/src/app/metadata/domain/component/forms/metadata-ui-form.component.spec.ts b/ui/src/app/metadata/domain/component/forms/metadata-ui-form.component.spec.ts
index 3c86d3b13..a09b3bd66 100644
--- a/ui/src/app/metadata/domain/component/forms/metadata-ui-form.component.spec.ts
+++ b/ui/src/app/metadata/domain/component/forms/metadata-ui-form.component.spec.ts
@@ -3,7 +3,7 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ProviderValueEmitter, ProviderStatusEmitter } from '../../../domain/service/provider-change-emitter.service';
-import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
+import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 import { ListValuesService } from '../../../domain/service/list-values.service';
 import { MetadataUiFormComponent } from './metadata-ui-form.component';
 
@@ -12,6 +12,7 @@ import { FileBackedHttpMetadataResolver } from '../../entity';
 import { InputDefaultsDirective } from '../../../../shared/directive/input-defaults.directive';
 import { MockI18nModule } from '../../../../../testing/i18n.stub';
 import { MockListValueService } from '../../../../../testing/list-values.stub';
+import { MockSharedModule } from '../../../../../testing/shared.stub';
 
 @Component({
     template: `<metadata-ui-form [resolver]="resolver"></metadata-ui-form>`
@@ -45,7 +46,7 @@ describe('Metadata UI Form Component', () => {
             imports: [
                 NoopAnimationsModule,
                 ReactiveFormsModule,
-                NgbPopoverModule,
+                MockSharedModule,
                 MockI18nModule
             ],
             declarations: [
diff --git a/ui/src/app/metadata/domain/component/forms/organization-info-form.component.html b/ui/src/app/metadata/domain/component/forms/organization-info-form.component.html
index 3062590e4..eab15cabf 100644
--- a/ui/src/app/metadata/domain/component/forms/organization-info-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/organization-info-form.component.html
@@ -10,12 +10,7 @@
                         </span>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipOrganizationName >
-                            <translate-i18n key="tooltip.organization-name">Organization Name Popover</translate-i18n>
-                        </ng-template>
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                           [ngbPopover]="tooltipOrganizationName"
-                           [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'tooltip.organization-name' | translate"></info-icon>
                     </span>
                 </div>
                 <input id="name" type="text" class="form-control" placeholder="" formControlName="name" role="textbox" />
@@ -29,12 +24,7 @@
                         </span>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipOrganizationDisplayName>
-                            <translate-i18n key="tooltip.organization-display-name">Organization Display Name Popover</translate-i18n>
-                        </ng-template>
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                            [ngbPopover]="tooltipOrganizationDisplayName"
-                            [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'tooltip.organization-display-name' | translate"></info-icon>
                     </span>
                 </div>
                 <input id="displayName" type="text" class="form-control" placeholder="" formControlName="displayName" role="textbox" />
@@ -48,12 +38,7 @@
                         </span>
                     </label>
                     <span class="col-sm-2 text-right">
-                        <ng-template #tooltipOrganizationUrl>
-                            <translate-i18n key="tooltip.organization-url">Organization Url Popover</translate-i18n>
-                        </ng-template>
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                            [ngbPopover]="tooltipOrganizationUrl"
-                            [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'tooltip.organization-url' | translate"></info-icon>
                     </span>
                 </div>
                 <input id="url" type="text" class="form-control" placeholder="" formControlName="url" role="textbox" />
@@ -101,12 +86,7 @@
                                                 <translate-i18n key="label.contact-name">Contact Name</translate-i18n>
                                             </label>
                                             <span class="col-sm-3 text-right">
-                                                <ng-template #tooltipContactName>
-                                                    <translate-i18n key="tooltip.contact-name">Contact Name Popover</translate-i18n>
-                                                </ng-template>
-                                                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                                   [ngbPopover]="tooltipContactName"
-                                                   [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                                <info-icon [description]="'tooltip.contact-name' | translate"></info-icon>
                                             </span>
                                         </div>
                                         <input [id]="'name-' + i" type="text" class="form-control" placeholder="" formControlName="name" aria-label="Contact name" role="textbox" />
@@ -119,12 +99,7 @@
                                                 <translate-i18n key="label.contact-type">Contact Type</translate-i18n>
                                             </label>
                                             <span class="col-sm-2 text-right">
-                                                <ng-template #tooltipContactType>
-                                                    <translate-i18n key="tooltip.contact-type">Contact Type Popover</translate-i18n>
-                                                </ng-template>
-                                            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                               [ngbPopover]="tooltipContactType"
-                                               [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                                <info-icon [description]="'tooltip.contact-type' | translate"></info-icon>
                                             </span>
                                         </div>
                                         <select [id]="'type-' + i" class="form-control" formControlName="type" aria-label="Contact type dropdown" role="listbox">
@@ -144,13 +119,7 @@
                                                 <translate-i18n key="label.contact-email-address">Contact Email Address</translate-i18n>
                                             </label>
                                             <span class="col-sm-2 text-right">
-                                                <ng-template #tooltipContactEmail>
-                                                    <translate-i18n key="tooltip.contact-email">Contact Email Popover</translate-i18n>
-                                                </ng-template>
-                                                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                                                   [ngbPopover]="tooltipContactEmail"
-                                                  
-                                                   [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                                                <info-icon [description]="'tooltip.contact-email' | translate"></info-icon>
                                             </span>
                                         </div>
                                         <input [id]="'email-' + i" type="email" class="form-control" placeholder="" formControlName="emailAddress" role="textbox" />
diff --git a/ui/src/app/metadata/domain/component/forms/organization-info-form.component.spec.ts b/ui/src/app/metadata/domain/component/forms/organization-info-form.component.spec.ts
index e5a4d30e4..c30c63f56 100644
--- a/ui/src/app/metadata/domain/component/forms/organization-info-form.component.spec.ts
+++ b/ui/src/app/metadata/domain/component/forms/organization-info-form.component.spec.ts
@@ -2,12 +2,13 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ProviderValueEmitter, ProviderStatusEmitter } from '../../../domain/service/provider-change-emitter.service';
-import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
+import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 import { ListValuesService } from '../../../domain/service/list-values.service';
 import { OrganizationInfoFormComponent } from './organization-info-form.component';
 import * as stubs from '../../../../../testing/resolver.stub';
 import { MockI18nModule } from '../../../../../testing/i18n.stub';
 import { MockListValueService } from '../../../../../testing/list-values.stub';
+import { MockSharedModule } from '../../../../../testing/shared.stub';
 
 describe('Organization Info Form Component', () => {
     let fixture: ComponentFixture<OrganizationInfoFormComponent>;
@@ -24,7 +25,7 @@ describe('Organization Info Form Component', () => {
             imports: [
                 NoopAnimationsModule,
                 ReactiveFormsModule,
-                NgbPopoverModule,
+                MockSharedModule,
                 MockI18nModule
             ],
             declarations: [
diff --git a/ui/src/app/metadata/domain/component/forms/relying-party-form.component.html b/ui/src/app/metadata/domain/component/forms/relying-party-form.component.html
index 19f2f234f..40387d505 100644
--- a/ui/src/app/metadata/domain/component/forms/relying-party-form.component.html
+++ b/ui/src/app/metadata/domain/component/forms/relying-party-form.component.html
@@ -7,11 +7,7 @@
                         [value]="true" role="checkbox" aria-checked="false">
                     <label class="custom-control-label" translate="label.sign-the-assertion" for="signAssertion">Sign the Assertion</label>
                 </div>
-                <ng-template #tooltipSignAssertion>
-                    <translate-i18n key="tooltip.sign-assertion">Sign Assertion popover</translate-i18n>
-                </ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipSignAssertion"
-                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                <info-icon [description]="'tooltip.sign-assertion' | translate"></info-icon>
             </fieldset>
         </div>
         <div class="form-group">
@@ -21,11 +17,7 @@
                         [value]="true" role="checkbox" aria-checked="false">
                     <label class="custom-control-label" translate="label.dont-sign-the-response" for="dontSignResponse">Don't Sign the Response</label>
                 </div>
-                <ng-template #tooltipDontSignResponse>
-                    <translate-i18n key="tooltip.dont-sign-response">Don't Sign Response popover</translate-i18n>
-                </ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipDontSignResponse"
-                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                <info-icon [description]="'tooltip.dont-sign-response' | translate"></info-icon>
             </fieldset>
         </div>
         <div class="form-group">
@@ -35,11 +27,7 @@
                         [value]="true" role="checkbox" aria-checked="false">
                     <label class="custom-control-label" translate="label.turn-off-encryption-of-response" for="turnOffEncryption">Turn Off Encryption of Response</label>
                 </div>
-                <ng-template #tooltipTurnOffEncryption>
-                    <translate-i18n key="tooltip.turn-off-encryption">Turn Off Encryption of Response popover</translate-i18n>
-                </ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipTurnOffEncryption"
-                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                <info-icon [description]="'tooltip.turn-off-encryption' | translate"></info-icon>
             </fieldset>
         </div>
         <div class="form-group">
@@ -49,11 +37,7 @@
                         role="checkbox" aria-checked="false">
                     <label class="custom-control-label" translate="label.use-sha1-signing-algorithm" for="useSha">Use SHA1 Signing Algorithm</label>
                 </div>
-                <ng-template #tooltipUseShaAlgorithm>
-                    <translate-i18n key="tooltip.usa-sha-algorithm">Use SHA1 Signing Algorithm popover</translate-i18n>
-                </ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipUseShaAlgorithm"
-                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                <info-icon [description]="'tooltip.usa-sha-algorithm' | translate"></info-icon>
             </fieldset>
         </div>
         <div formArrayName="nameIdFormats" class="form-group">
@@ -65,28 +49,20 @@
                         role="button">Add NameID Format</button>
                 </span>
                 <span class="col-sm-2 text-right">
-                    <ng-template #tooltipNameIdFormat>
-                        <translate-i18n key="tooltip.nameid-format">Add NameID Format popover</translate-i18n>
-                    </ng-template>
-                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipNameIdFormat"
-                        [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                    <info-icon [description]="'tooltip.nameid-format' | translate"></info-icon>
                 </span>
             </div>
             <div *ngIf="nameIdFormatList.length" class="p-2">
-                <div class="row" *ngFor="let format of nameIdFormatList.controls; let i=index; let isLast=last">
-                    <label [for]="'nameIdFormat-' + i" class="sr-only">
-                        <translate-i18n key="label.nameid-format">NameID Format</translate-i18n>
-                        {{ i + 1 }}
-                    </label>
-                    <auto-complete
-                        class="col-sm-11"
-                        [id]="'nameIdFormat-' + i"
-                        [formControlName]="i"
-                        [matches]="nameIds$ | async"
-                        [required]="true"
-                        (onChange)="searchNameIds($event)"
-                        aria-label="Name ID Format (type for auto-complete)">
-                    </auto-complete>
+                <div class="row mb-2" *ngFor="let format of nameIdFormatList.controls; let i=index; let isLast=last">
+                    <div class="col-sm-11 d-flex">
+                        <label [for]="'nameIdFormat-' + i" class="p-2">
+                            <translate-i18n key="label.nameid-format" class="sr-only">NameID Format</translate-i18n>
+                            {{ i + 1 }}.
+                        </label>
+                        <auto-complete class="flex-grow-1" [id]="'nameIdFormat-' + i" [fieldId]="'nameIdFormat-' + i" [formControlName]="i"
+                            [matches]="nameIds$ | async" [required]="true" (onChange)="searchNameIds($event)" aria-label="Name ID Format (type for auto-complete)">
+                        </auto-complete>
+                    </div>
                     <div class="col-sm-1 text-right">
                         <button class="btn btn-link" (click)="removeFormat(i)" aria-label="Delete NameID format" role="button">
                             <i class="fa fa-fw fa-trash fa-lg text-danger"></i>
@@ -104,27 +80,19 @@
                         role="button">Add Authentication Method</button>
                 </span>
                 <span class="col-sm-2 text-right">
-                    <ng-template #tooltipAuthMethod>
-                        <translate-i18n key="tooltip.authentication-methods-to-use">Authentication Methods to Use popover</translate-i18n>
-                    </ng-template>
-                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipAuthMethod"
-                        [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                    <info-icon [description]="'tooltip.authentication-methods-to-use' | translate"></info-icon>
                 </span>
             </div>
             <div *ngIf="authenticationMethodList.length" class="p-2">
-                <div class="row" *ngFor="let format of authenticationMethodList.controls; let i=index; let isLast=last">
-                    <label [for]="'authMethod-' + i" class="sr-only">
-                        <translate-i18n key="label.auth-method-indexed">Authentication Method</translate-i18n> {{ i + 1 }}
-                    </label>
-                    <auto-complete
-                        class="col-sm-11"
-                        [id]="'authMethod-' + i"
-                        [formControlName]="i"
-                        [matches]="authenticationMethods$ | async"
-                        [required]="true"
-                        (onChange)="searchAuthMethods($event)"
-                        aria-label="Authentication method (type for auto-complete)">
-                    </auto-complete>
+                <div class="row mb-2" *ngFor="let format of authenticationMethodList.controls; let i=index; let isLast=last">
+                    <div class="col-sm-11 d-flex">
+                        <label [for]="'authMethod-' + i" class="p-2">
+                            <translate-i18n key="label.auth-method-indexed" class="sr-only">Authentication Method</translate-i18n> {{ i + 1 }}.
+                        </label>
+                        <auto-complete class="flex-grow-1" [id]="'authMethod-' + i" [fieldId]="'authMethod-' + i" [formControlName]="i" [matches]="authenticationMethods$ | async"
+                            [required]="true" (onChange)="searchAuthMethods($event)" aria-label="Authentication method (type for auto-complete)">
+                        </auto-complete>
+                    </div>
                     <div class="col-sm-1 text-right">
                         <button class="btn btn-link" (click)="removeAuthenticationMethod(i)" aria-label="Delete authentication method" role="button">
                             <i class="fa fa-fw fa-trash fa-lg text-danger"></i>
@@ -140,11 +108,7 @@
                         [value]="true" id="ignoreAuthenticationMethod" role="checkbox" aria-checked="false">
                     <label class="custom-control-label" translate="label.ignore-any-sp-requested-authentication-method" for="ignoreAuthenticationMethod">Ignore any SP-Requested Authentication Method</label>
                 </div>
-                <ng-template #tooltipIgnoreAuthMethod>
-                    <translate-i18n key="tooltip.ignore-auth-method">Ignore any SP-Requested Authentication Method popover</translate-i18n>
-                </ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipIgnoreAuthMethod"
-                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                <info-icon [description]="'tooltip.ignore-auth-method' | translate"></info-icon>
             </fieldset>
         </div>
         <div class="form-group">
@@ -156,12 +120,7 @@
                         Force AuthN
                     </label>
                 </div>
-                <ng-template #tooltipForceAuthn>
-                    <translate-i18n key="tooltip.force-authn">Disallows use (or reuse) of authentication results and login flows that don't provide a real-time proof of user
-                    presence in the login process</translate-i18n>
-                </ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipForceAuthn"
-                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                <info-icon [description]="'tooltip.force-authn' | translate"></info-icon>
             </fieldset>
         </div>
         <div class="form-group">
@@ -171,11 +130,7 @@
                         id="omitNotBefore" role="checkbox" aria-checked="false">
                     <label class="custom-control-label" translate="label.omit-not-before-condition" for="omitNotBefore">Omit Not Before Condition</label>
                 </div>
-                <ng-template #tooltipOmitNotBeforeCondition>
-                    <translate-i18n key="tooltip.omit-not-before-condition">Omit Not Before Condition popover</translate-i18n>
-                </ng-template>
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipOmitNotBeforeCondition"
-                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                <info-icon [description]="'tooltip.omit-not-before-condition' | translate"></info-icon>
             </fieldset>
         </div>
         <div class="form-group">
@@ -184,11 +139,7 @@
                     <translate-i18n key="label.responder-id">ResponderID</translate-i18n>
                 </label>
                 <span class="col-sm-2 text-right">
-                    <ng-template #tooltipResponderId>
-                        <translate-i18n key="tooltip.responder-id">ResponderId popover</translate-i18n>
-                    </ng-template>
-                    <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltipResponderId"
-                        [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                    <info-icon [description]="'tooltip.responder-id' | translate"></info-icon>
                 </span>
             </div>
             <input id="responderId" class="form-control" type="text" formControlName="responderId" role="textbox">
diff --git a/ui/src/app/metadata/domain/component/forms/relying-party-form.component.spec.ts b/ui/src/app/metadata/domain/component/forms/relying-party-form.component.spec.ts
index 274bbc3e0..c12feca92 100644
--- a/ui/src/app/metadata/domain/component/forms/relying-party-form.component.spec.ts
+++ b/ui/src/app/metadata/domain/component/forms/relying-party-form.component.spec.ts
@@ -3,7 +3,7 @@ import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ProviderValueEmitter, ProviderStatusEmitter } from '../../../domain/service/provider-change-emitter.service';
-import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
+import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
 import { ListValuesService } from '../../../domain/service/list-values.service';
 import { RelyingPartyFormComponent } from './relying-party-form.component';
 import * as stubs from '../../../../../testing/resolver.stub';
@@ -11,6 +11,7 @@ import { SharedModule } from '../../../../shared/shared.module';
 import { FileBackedHttpMetadataResolver } from '../../entity';
 import { MockI18nModule } from '../../../../../testing/i18n.stub';
 import { MockListValueService } from '../../../../../testing/list-values.stub';
+import { MockSharedModule } from '../../../../../testing/shared.stub';
 
 
 @Component({
@@ -54,8 +55,7 @@ describe('Relying Party Form Component', () => {
             imports: [
                 NoopAnimationsModule,
                 ReactiveFormsModule,
-                NgbPopoverModule,
-                SharedModule,
+                MockSharedModule,
                 MockI18nModule
             ],
             declarations: [
diff --git a/ui/src/app/metadata/domain/component/index.ts b/ui/src/app/metadata/domain/component/index.ts
index 9aca9ce25..e95549109 100644
--- a/ui/src/app/metadata/domain/component/index.ts
+++ b/ui/src/app/metadata/domain/component/index.ts
@@ -2,8 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
-import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';
+import { NgbPopoverModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AdvancedInfoFormComponent } from './forms/advanced-info-form.component';
 import { OrganizationInfoFormComponent } from './forms/organization-info-form.component';
diff --git a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.spec.ts b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.spec.ts
index 823f7d1e2..95e8537f0 100644
--- a/ui/src/app/metadata/manager/container/dashboard-providers-list.component.spec.ts
+++ b/ui/src/app/metadata/manager/container/dashboard-providers-list.component.spec.ts
@@ -3,8 +3,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule, Store, combineReducers } from '@ngrx/store';
-import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap/pagination/pagination.module';
-import { NgbModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';
+import { NgbPaginationModule, NgbModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 import * as fromDashboard from '../reducer';
 import { ProviderSearchComponent } from '../component/provider-search.component';
 import { DeleteDialogComponent } from '../component/delete-dialog.component';
diff --git a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts
index 782f8c763..b5cbe9d8d 100644
--- a/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts
+++ b/ui/src/app/metadata/manager/container/dashboard-resolvers-list.component.spec.ts
@@ -3,8 +3,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule, Store, combineReducers } from '@ngrx/store';
-import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap/pagination/pagination.module';
-import { NgbModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';
+import { NgbPaginationModule, NgbModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 import * as fromDashboard from '../reducer';
 import { ProviderSearchComponent } from '../component/provider-search.component';
 import { EntityItemComponent } from '../component/entity-item.component';
diff --git a/ui/src/app/metadata/manager/manager.module.ts b/ui/src/app/metadata/manager/manager.module.ts
index fd0ba9fc2..778d18c2d 100644
--- a/ui/src/app/metadata/manager/manager.module.ts
+++ b/ui/src/app/metadata/manager/manager.module.ts
@@ -3,7 +3,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { RouterModule, Routes } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
-import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap/pagination/pagination.module';
+import { NgbPaginationModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 
@@ -17,7 +17,6 @@ import { DashboardProvidersListComponent } from './container/dashboard-providers
 import { reducers } from './reducer';
 import { SearchEffects } from './effect/search.effects';
 import { DeleteDialogComponent } from './component/delete-dialog.component';
-import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { SharedModule } from '../../shared/shared.module';
 import { I18nModule } from '../../i18n/i18n.module';
diff --git a/ui/src/app/metadata/resolver/container/editor.component.ts b/ui/src/app/metadata/resolver/container/editor.component.ts
index 5d4b6e1c3..0071a97dc 100644
--- a/ui/src/app/metadata/resolver/container/editor.component.ts
+++ b/ui/src/app/metadata/resolver/container/editor.component.ts
@@ -13,7 +13,7 @@ import { Observable, Subject, of } from 'rxjs';
 import { combineLatest, map, takeUntil, withLatestFrom, debounceTime, skipWhile, distinctUntilChanged } from 'rxjs/operators';
 
 import { Store } from '@ngrx/store';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap/modal/modal';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { MetadataResolver } from '../../domain/model/metadata-resolver';
 import * as fromResolver from '../reducer';
diff --git a/ui/src/app/schema-form/widget/array/array.component.html b/ui/src/app/schema-form/widget/array/array.component.html
index 6e0643d65..9392fe327 100644
--- a/ui/src/app/schema-form/widget/array/array.component.html
+++ b/ui/src/app/schema-form/widget/array/array.component.html
@@ -10,11 +10,7 @@
         </button>
         &nbsp;
         <span class="text-right" *ngIf="schema.description">
-            <ng-template #tooltip>
-                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
-            </ng-template>
-            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltip"
-                [attr.aria-label]="'tooltip.instruction' | translate"></i>
+            <info-icon [description]="schema.description | translate"></info-icon>
         </span>
     </div>
     <div *ngFor="let itemProperty of formProperty.properties; let i=index; trackBy:trackByIndex" class="mt-2">
diff --git a/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html b/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
index 5a23b6b82..ce23a6dea 100644
--- a/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
+++ b/ui/src/app/schema-form/widget/boolean-radio/boolean-radio.component.html
@@ -2,13 +2,7 @@
     <label class="d-flex justify-content-start control-label">
         <span [translate]="schema.title">{{ schema.title }}</span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip>
-                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
-            </ng-template>&nbsp;&nbsp;
-            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                [ngbPopover]="tooltip"
-                i18n-aria-label="tooltip.instruction"
-                [attr.aria-label]="'tooltip.instruction' | translate"></i>
+            <info-icon [description]="schema.description | translate"></info-icon>
         </span>
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
diff --git a/ui/src/app/schema-form/widget/check/checkbox.component.html b/ui/src/app/schema-form/widget/check/checkbox.component.html
index e499eb17b..8ad2962ab 100644
--- a/ui/src/app/schema-form/widget/check/checkbox.component.html
+++ b/ui/src/app/schema-form/widget/check/checkbox.component.html
@@ -15,11 +15,7 @@
                 </label>
             </div>
             <div>
-                <ng-template #tooltip>
-                    <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
-                </ng-template>&nbsp;&nbsp;
-                <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg" [ngbPopover]="tooltip"
-                    [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                <info-icon [description]="schema.description | translate"></info-icon>
             </div>
         </div>
     </ng-container>
diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.html b/ui/src/app/schema-form/widget/datalist/datalist.component.html
index b83f9c145..6ec585342 100644
--- a/ui/src/app/schema-form/widget/datalist/datalist.component.html
+++ b/ui/src/app/schema-form/widget/datalist/datalist.component.html
@@ -5,13 +5,7 @@
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip>
-                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
-            </ng-template>&nbsp;&nbsp;
-            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                [ngbPopover]="tooltip"
-                i18n-aria-label="tooltip.instruction"
-                [attr.aria-label]="'tooltip.instruction' | translate"></i>
+            <info-icon [description]="schema.description | translate"></info-icon>
         </span>
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
diff --git a/ui/src/app/schema-form/widget/filter-target/filter-target.component.html b/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
index 69e1860f3..50de6be03 100644
--- a/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
+++ b/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
@@ -6,12 +6,7 @@
                     <span>
                         <translate-i18n key="action.search-by">Search By</translate-i18n> <i class="fa fa-asterisk text-danger" aria-hidden="true"></i></span>
                     <span>
-                        <ng-template #tooltipBy>
-                            <translate-i18n key="action.search-by">Search By</translate-i18n>
-                        </ng-template>
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                            [ngbPopover]="tooltipBy"
-                            [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'action.search-by' | translate"></info-icon>
                     </span>
                 </label>
                 <div ngbDropdown>
@@ -47,13 +42,7 @@
                             *ngIf="entityAttributesFilterTargetType !== 'ENTITY'"></i>
                     </span>
                     <span>
-                        <ng-template #tooltipCriteria>
-                            <translate-i18n key="label.search-criteria-by" [params]="{ displayType: (displayType | translate) }">Search Criteria by {{ this.displayType }}</translate-i18n>
-                        </ng-template>&nbsp;&nbsp;
-                        <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                            [ngbPopover]="tooltipCriteria"
-                           
-                            [attr.aria-label]="'tooltip.instruction' | translate"></i>
+                        <info-icon [description]="'label.search-criteria-by' | translate:{ displayType: (displayType | translate) }"></info-icon>
                     </span>
                 </label>
                 <div class="d-flex justify-content-between">
diff --git a/ui/src/app/schema-form/widget/number/number.component.html b/ui/src/app/schema-form/widget/number/number.component.html
index 8f50e41af..aa07e2fbb 100644
--- a/ui/src/app/schema-form/widget/number/number.component.html
+++ b/ui/src/app/schema-form/widget/number/number.component.html
@@ -5,12 +5,7 @@
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip>
-                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
-            </ng-template>&nbsp;&nbsp;
-            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                [ngbPopover]="tooltip"
-                [attr.aria-label]="'tooltip.instruction' | translate"></i>
+            <info-icon [description]="schema.description | translate"></info-icon>
         </span>
     </label>
     <span *ngIf="schema.description" class="formHelp" [translate]="schema.description">{{schema.description}}</span>
diff --git a/ui/src/app/schema-form/widget/select/select.component.html b/ui/src/app/schema-form/widget/select/select.component.html
index 4b3437484..819a89553 100644
--- a/ui/src/app/schema-form/widget/select/select.component.html
+++ b/ui/src/app/schema-form/widget/select/select.component.html
@@ -5,12 +5,7 @@
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip>
-                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
-            </ng-template>&nbsp;&nbsp;
-            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                [ngbPopover]="tooltip"
-                [attr.aria-label]="'tooltip.instruction' | translate"></i>
+            <info-icon [description]="schema.description | translate"></info-icon>
         </span>
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">
diff --git a/ui/src/app/schema-form/widget/string/string.component.html b/ui/src/app/schema-form/widget/string/string.component.html
index b7741f53c..e8dd0001a 100644
--- a/ui/src/app/schema-form/widget/string/string.component.html
+++ b/ui/src/app/schema-form/widget/string/string.component.html
@@ -3,12 +3,7 @@
         <span>
             <translate-i18n [key]="schema.title">{{ schema.title }}</translate-i18n> <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i></span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip>
-                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
-            </ng-template>&nbsp;&nbsp;
-            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                [ngbPopover]="tooltip"
-                [attr.aria-label]="'tooltip.instruction' | translate"></i>
+            <info-icon [description]="schema.description | translate"></info-icon>
         </span>
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
diff --git a/ui/src/app/schema-form/widget/textarea/textarea.component.html b/ui/src/app/schema-form/widget/textarea/textarea.component.html
index b14bbc489..fb8164600 100644
--- a/ui/src/app/schema-form/widget/textarea/textarea.component.html
+++ b/ui/src/app/schema-form/widget/textarea/textarea.component.html
@@ -5,12 +5,7 @@
             <i class="fa fa-asterisk text-danger" aria-hidden="true" *ngIf="required"></i>
         </span>
         <span *ngIf="schema.description">
-            <ng-template #tooltip>
-                <translate-i18n [key]="schema.description">{{ schema.description }}</translate-i18n>
-            </ng-template>&nbsp;&nbsp;
-            <i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
-                [ngbPopover]="tooltip"
-                [attr.aria-label]="'tooltip.instruction' | translate"></i>
+            <info-icon [description]="schema.description | translate"></info-icon>
         </span>
     </label>
     <span *ngIf="schema.description" class="sr-only" [translate]="schema.description">{{ schema.description }}</span>
diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.spec.ts b/ui/src/app/shared/autocomplete/autocomplete.component.spec.ts
index d087a87f6..67c2110b5 100644
--- a/ui/src/app/shared/autocomplete/autocomplete.component.spec.ts
+++ b/ui/src/app/shared/autocomplete/autocomplete.component.spec.ts
@@ -2,8 +2,6 @@ import { Component, ViewChild, SimpleChange, ElementRef, SimpleChanges } from '@
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule, Store, combineReducers } from '@ngrx/store';
-import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
 import { AutoCompleteComponent } from './autocomplete.component';
 import { NavigatorService } from '../../core/service/navigator.service';
 import { ValidationClassDirective } from '../validation/validation-class.directive';
diff --git a/ui/src/app/shared/component/info-icon.component.html b/ui/src/app/shared/component/info-icon.component.html
new file mode 100644
index 000000000..58c70b2db
--- /dev/null
+++ b/ui/src/app/shared/component/info-icon.component.html
@@ -0,0 +1,12 @@
+<ng-template #tooltipContent>
+    <span #content>{{ 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">
+    <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
diff --git a/ui/src/app/shared/component/info-icon.component.scss b/ui/src/app/shared/component/info-icon.component.scss
new file mode 100644
index 000000000..e42aa999e
--- /dev/null
+++ b/ui/src/app/shared/component/info-icon.component.scss
@@ -0,0 +1,13 @@
+:host {
+    .btn-nostyle {
+        margin: 0px;
+        padding: 0px;
+        background: none;
+        border: none;
+        display: inline;
+    }
+
+    .popover .popover-body {
+        min-width: 160px;
+    }
+}
\ No newline at end of file
diff --git a/ui/src/app/shared/component/info-icon.component.ts b/ui/src/app/shared/component/info-icon.component.ts
new file mode 100644
index 000000000..d5a7fb207
--- /dev/null
+++ b/ui/src/app/shared/component/info-icon.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
+
+@Component({
+    selector: 'info-icon',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './info-icon.component.html',
+    styleUrls: ['./info-icon.component.scss']
+})
+export class InfoIconComponent {
+    @Input() description: string;
+}
diff --git a/ui/src/app/shared/directive/info-label.directive.ts b/ui/src/app/shared/directive/info-label.directive.ts
index 30fca48f4..893bd139d 100644
--- a/ui/src/app/shared/directive/info-label.directive.ts
+++ b/ui/src/app/shared/directive/info-label.directive.ts
@@ -18,7 +18,7 @@ export class InfoLabelDirective {
         private element: ElementRef
     ) {
         config.triggers = 'mouseenter:mouseleave';
-        config.placement = ['top'];
+        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 4218324ba..20792a8aa 100644
--- a/ui/src/app/shared/shared.module.ts
+++ b/ui/src/app/shared/shared.module.ts
@@ -13,13 +13,16 @@ import { ContenteditableDirective } from './contenteditable/contenteditable.dire
 import { ReplacePipe } from './pipe/replace.pipe';
 import { I18nModule } from '../i18n/i18n.module';
 import { CustomDatePipe } from './pipe/date.pipe';
+import { InfoIconComponent } from './component/info-icon.component';
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
     imports: [
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
-        I18nModule
+        I18nModule,
+        NgbPopoverModule
     ],
     declarations: [
         HighlightPipe,
@@ -32,7 +35,8 @@ import { CustomDatePipe } from './pipe/date.pipe';
         PrettyXml,
         ReplacePipe,
         CustomDatePipe,
-        ContenteditableDirective
+        ContenteditableDirective,
+        InfoIconComponent
     ],
     exports: [
         HighlightPipe,
@@ -47,7 +51,8 @@ import { CustomDatePipe } from './pipe/date.pipe';
         InfoLabelDirective,
         ContenteditableDirective,
         ReplacePipe,
-        CustomDatePipe
+        CustomDatePipe,
+        InfoIconComponent
     ]
 })
 export class SharedModule { }
diff --git a/ui/src/testing/modal.stub.ts b/ui/src/testing/modal.stub.ts
index 8c64cff35..2b39e3849 100644
--- a/ui/src/testing/modal.stub.ts
+++ b/ui/src/testing/modal.stub.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { NgbModalOptions } from '@ng-bootstrap/ng-bootstrap/modal/modal';
+import { NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
 
 @Injectable()
 export class NgbModalStub {
diff --git a/ui/src/testing/shared.stub.ts b/ui/src/testing/shared.stub.ts
new file mode 100644
index 000000000..64d2ebd65
--- /dev/null
+++ b/ui/src/testing/shared.stub.ts
@@ -0,0 +1,68 @@
+import { Component, Input, NgModule, Output, EventEmitter, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+
+@Component({
+    selector: 'info-icon',
+    template: '{{ description }}'
+})
+export class MockIconComponent {
+    @Input() description: string;
+}
+
+@Component({
+    selector: 'auto-complete',
+    template: '<div></div>',
+    styleUrls: [],
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => MockAutoCompleteComponent),
+            multi: true
+        }
+    ]
+})
+export class MockAutoCompleteComponent implements ControlValueAccessor {
+    @Input() defaultValue = '';
+    @Input() matches: string[] = [];
+    @Input() id: string;
+    @Input() fieldId: string;
+    @Input() autoSelect = false;
+    @Input() noneFoundText = 'No Options Found';
+    @Input() limit = 0;
+    @Input() processing = false;
+    @Input() dropdown = false;
+    @Input() placeholder = '';
+
+    @Output() more: EventEmitter<any> = new EventEmitter<any>();
+    @Output() onChange: EventEmitter<string> = new EventEmitter<string>();
+
+    propagateChange = (_: any | null) => { };
+    propagateTouched = (_: any | null) => { };
+
+    constructor() { }
+
+    writeValue(value: any): void {}
+
+    registerOnChange(fn: any): void {}
+
+    registerOnTouched(fn: any): void {}
+
+    setDisabledState(isDisabled: boolean = false): void {}
+}
+
+@NgModule({
+    imports: [
+        CommonModule
+    ],
+    declarations: [
+        MockIconComponent,
+        MockAutoCompleteComponent
+    ],
+    exports: [
+        MockIconComponent,
+        MockAutoCompleteComponent
+    ],
+    providers: []
+})
+export class MockSharedModule {}