Custom bootstrap tooltip with separate styles and directive (#345)

* Launch application scancodes (closes #328)

* simple directive to map bootstrap tooltip, add sample usage

* Custom bootstrap tooltip with separate styles and directive (closes #329)

* fix: linting issues

* fix: try to ignore stylelint for !important

* review: simple tooltip with html content and custom styles

* cleanup extra html tags for tooltip sample

electron/src/app.module.ts

@@ -70,7 +70,7 @@ import { AppComponent } from './app/app.component';
 import { MainAppComponent } from './main-app';
 import { UpdateAvailableComponent } from './components/update-available/update-available.component';
 
-import { CancelableDirective } from './shared/directives';
+import { CancelableDirective, TooltipDirective } from './shared/directives';
 import { SafeStylePipe } from './shared/pipes';
 
 import { CaptureService } from './shared/services/capture.service';
@@ -160,6 +160,7 @@ import { angularNotifierConfig } from '../../shared/src/models/angular-notifier-
         PrivilegeCheckerComponent,
         UhkMessageComponent,
         CancelableDirective,
+        TooltipDirective,
         SafeStylePipe,
         UpdateAvailableComponent,
         AutoUpdateSettings

package.json

@@ -20,6 +20,7 @@
     "@types/electron-devtools-installer": "^2.0.2",
     "@types/electron-settings": "^3.0.0",
     "@types/file-saver": "0.0.1",
+    "@types/bootstrap": "3.3.34",
     "@types/jquery": "^3.2.6",
     "@types/node": "^8.0.9",
     "@types/node-hid": "^0.5.2",

shared/src/components/popover/tab/keypress/keypress-tab.component.html

@@ -40,7 +40,7 @@
              (valueChanged)="onLongpressChange($event)"
              [width]="140"
     ></select2>
-    <icon name="question-circle" title="This action activates when another key gets pressed while holding this key."></icon>
+    <icon name="question-circle" data-toggle="tooltip" title="This action activates when another key gets pressed while holding this key."></icon>
 </div>
 
 <div class="disabled-state--text">

shared/src/directives/index.ts

@@ -1 +1,2 @@
 export * from './cancelable';
+export * from './tooltip';

shared/src/directives/tooltip/index.ts

@@ -0,0 +1 @@
+export { TooltipDirective } from './tooltip.directive';

shared/src/directives/tooltip/tooltip.directive.ts

@@ -0,0 +1,25 @@
+import { Directive, ElementRef, AfterContentInit, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[data-toggle="tooltip"]'
+})
+export class TooltipDirective implements AfterContentInit {
+
+    private customTooltipTemplate = `
+        <div class="tooltip">
+            <div class="tooltip-arrow"></div>
+            <div class="tooltip-inner"></div>
+        </div>
+    `;
+
+    constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
+
+    ngAfterContentInit() {
+        jQuery(this.elementRef.nativeElement).tooltip({
+            placement: 'top',
+            html: true,
+            template: this.customTooltipTemplate
+        });
+    }
+
+}

shared/src/main-app/_tooltip.scss

@@ -0,0 +1,22 @@
+$tooltip-text-color: #fff;
+$tooltip-background: #333;
+
+// Customised bootstrap tooltip
+// Source: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=create-custom-template-for-tooltips
+.tooltip {
+    z-index: 10001; // Over dropdowns
+
+    .tooltip-inner {
+        color: $tooltip-text-color;
+        background: $tooltip-background;
+    }
+
+    .tooltip-arrow {
+        // Placement top
+        /* stylelint-disable-next-line declaration-no-important */
+        border-top-color: $tooltip-background !important;
+        // Placemet bottom
+        /* stylelint-disable-next-line declaration-no-important */
+        border-bottom-color: $tooltip-background !important;
+    }
+}

shared/src/main-app/main-app.component.scss

@@ -1,4 +1,5 @@
 @import '~angular-notifier/styles.scss';
+@import 'tooltip';
 
 main-app {
     display: block;

web/src/app.module.ts

@@ -63,7 +63,7 @@ import { SvgModuleComponent } from './shared/components/svg/module';
 import { SvgKeyboardWrapComponent } from './shared/components/svg/wrap';
 import { appRoutingProviders, MainAppComponent, routing } from './main-app';
 
-import { CancelableDirective } from './shared/directives';
+import { CancelableDirective, TooltipDirective } from './shared/directives';
 import { SafeStylePipe } from './shared/pipes';
 
 import { CaptureService } from './shared/services/capture.service';
@@ -137,6 +137,7 @@ import { angularNotifierConfig } from '../../shared/src/models/angular-notifier-
         SettingsComponent,
         KeyboardSliderComponent,
         CancelableDirective,
+        TooltipDirective,
         SafeStylePipe,
         AutoUpdateSettings
     ],