From e545c9d67b0cca187cba785fa39a49993e1c93b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3bert=20Kiss?= <erT78gb@gmail.com>
Date: Sun, 11 Feb 2018 19:47:41 +0100
Subject: [PATCH] feat(popover): Add Non-US help tooltip (#578)

---
 .../popover/tab/keypress/keypress-tab.component.html          | 4 ++++
 .../popover/tab/keypress/keypress-tab.component.scss          | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html
index fe405ea9..72cf7b63 100644
--- a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html
+++ b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.html
@@ -7,6 +7,10 @@
             [width]="200"
             [options]="options"
     ></select2>
+    <icon name="question-circle"
+          data-toggle="tooltip"
+          title="Looking for a non-US character, but can't find it? Please note that USB keyboards send scancodes, not characters to your computer. Your operating system translates the scancodes to characters according to your actual OS keyboard layout. This means that you have to select the US-equivalent character of the desired key in Agent."
+          data-placement="bottom"></icon>
     <capture-keystroke-button (capture)="onKeysCapture($event)" tabindex="0"></capture-keystroke-button>
 </div>
 <div class="modifier-options">
diff --git a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.scss b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.scss
index 74813846..795cbd2b 100644
--- a/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.scss
+++ b/packages/uhk-web/src/app/components/popover/tab/keypress/keypress-tab.component.scss
@@ -10,6 +10,10 @@
             position: relative;
             top: 2px;
         }
+
+        icon {
+            display: inline-block;
+        };
     }
 
     .modifier-options {