diff --git a/shared/src/directives/index.ts b/shared/src/directives/index.ts
index a6e0c1b6..4ae00488 100644
--- a/shared/src/directives/index.ts
+++ b/shared/src/directives/index.ts
@@ -1 +1,2 @@
export * from './cancelable';
+export * from './tooltip';
diff --git a/shared/src/directives/tooltip/index.ts b/shared/src/directives/tooltip/index.ts
new file mode 100644
index 00000000..243f6181
--- /dev/null
+++ b/shared/src/directives/tooltip/index.ts
@@ -0,0 +1 @@
+export { TooltipDirective } from './tooltip.directive';
diff --git a/shared/src/directives/tooltip/tooltip.directive.ts b/shared/src/directives/tooltip/tooltip.directive.ts
new file mode 100644
index 00000000..38486785
--- /dev/null
+++ b/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 = `
+
+ `;
+
+ constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
+
+ ngAfterContentInit() {
+ jQuery(this.elementRef.nativeElement).tooltip({
+ placement: 'top',
+ html: true,
+ template: this.customTooltipTemplate
+ });
+ }
+
+}
diff --git a/shared/src/main-app/_tooltip.scss b/shared/src/main-app/_tooltip.scss
new file mode 100644
index 00000000..b4130cde
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/shared/src/main-app/main-app.component.scss b/shared/src/main-app/main-app.component.scss
index 3509b59f..3d1b9d86 100644
--- a/shared/src/main-app/main-app.component.scss
+++ b/shared/src/main-app/main-app.component.scss
@@ -1,4 +1,5 @@
@import '~angular-notifier/styles.scss';
+@import 'tooltip';
main-app {
display: block;
diff --git a/web/src/app.module.ts b/web/src/app.module.ts
index d107f1cc..693f80ad 100644
--- a/web/src/app.module.ts
+++ b/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
],