New tooltip directive and component. Avoid using jQuery.

.eslintrc.json

@@ -45,7 +45,6 @@
             "accessibility": "explicit"
           }
         ],
-        "@typescript-eslint/no-use-before-define": "error",
         "brace-style": [
           "error",
           "1tbs"

projects/showcase/src/app/components/dialog/showcase-dialog.component.html

@@ -1,5 +1,5 @@
 <div class="container-fluid">
-    <systelab-button class="mt-2 mr-1" (action)="showStandardDialog()">Horizontal form
+    <systelab-button class="mt-2 mr-1" (action)="showStandardDialog()" systelabTooltip="Tooltip on right" systelabTooltipPlacement="right">Horizontal form
     </systelab-button>
     <systelab-button class="mt-2 mr-1" (action)="showVerticalDialog()">Vertical form
     </systelab-button>

projects/showcase/src/app/components/tooltip/showcase-tooltip.component.html

@@ -5,4 +5,6 @@
     <systelab-button class="mt-2 mr-1" systelabTooltip="Tooltip on left" systelabTooltipPlacement="left">Tooltip on left</systelab-button>
     <systelab-button class="mt-2 mr-1" systelabTooltip="Tooltip delay 100 ms" systelabTooltipDelay="100" systelabTooltipHideDelay="0">Tooltip delay 100 ms</systelab-button>
     <systelab-button class="mt-2 mr-1" systelabTooltip="Tooltip delay 100 ms and 0 ms to hide" systelabTooltipDelay="100" systelabTooltipHideDelay="0">Tooltip delay</systelab-button>
+    <systelab-button class="mt-2 mr-1" systelabTooltipHtml="This is an <strong>HTML</strong> tooltip" systelabTooltipDelay="100" systelabTooltipHideDelay="0">HTML Tooltip</systelab-button>
+
 </div>

projects/systelab-components/sass/_tooltip.scss

@@ -1,3 +1,78 @@
-.tooltip{
-  z-index:1000000;
-}
+$slab-tooltip-background-color: black !default;
+$slab-tooltip-foreground-color: white !default;
+$slab-tooltip-font-size: 13px !default;
+
+.slab-tooltip {
+  z-index: 1000000;
+  position: fixed;
+  background-color: $slab-tooltip-background-color;
+  border-radius: 4px;
+  color: $slab-tooltip-foreground-color;
+  padding: 3px 6px;
+  font-size: $slab-tooltip-font-size;
+  opacity: 0;
+
+  &::before {
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: 5px solid $slab-tooltip-background-color;
+  }
+
+  &--visible {
+    opacity: 1;
+    transition: opacity 300ms;
+  }
+
+  &--bottom {
+    transform: translateX(-50%);
+    margin-top: 7px;
+
+    &::before {
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-top: none;
+      left: calc(50% - 5px);
+      top: -5px;
+    }
+  }
+
+  &--top {
+    transform: translate(-50%, -100%);
+    margin-bottom: 7px;
+
+    &::before {
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-bottom: none;
+      left: calc(50% - 5px);
+      bottom: -5px;
+    }
+  }
+
+  &--left {
+    transform: translate(calc(-100% - 7px), -50%);
+
+    &::before {
+      border-top-color: transparent;
+      border-bottom-color: transparent;
+      border-right: none;
+      right: -5px;
+      top: calc(50% - 5px);
+    }
+  }
+
+  &--right {
+    transform: translateY(-50%);
+    margin-left: 7px;
+
+    &::before {
+      border-top-color: transparent;
+      border-bottom-color: transparent;
+      border-left: none;
+      left: -5px;
+      top: calc(50% - 5px);
+    }
+  }
+}

projects/systelab-components/sass/modern/_tooltip.scss

@@ -1,3 +1,78 @@
-.tooltip{
-  z-index:1000000;
-}
+$slab-tooltip-background-color: black !default;
+$slab-tooltip-foreground-color: white !default;
+$slab-tooltip-font-size: 13px !default;
+
+.slab-tooltip {
+  z-index: 1000000;
+  position: fixed;
+  background-color: $slab-tooltip-background-color;
+  border-radius: 4px;
+  color: $slab-tooltip-foreground-color;
+  padding: 3px 6px;
+  font-size: $slab-tooltip-font-size;
+  opacity: 0;
+
+  &::before {
+    content: '';
+    width: 0;
+    height: 0;
+    position: absolute;
+    border: 5px solid $slab-tooltip-background-color;
+  }
+
+  &--visible {
+    opacity: 1;
+    transition: opacity 300ms;
+  }
+
+  &--bottom {
+    transform: translateX(-50%);
+    margin-top: 7px;
+
+    &::before {
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-top: none;
+      left: calc(50% - 5px);
+      top: -5px;
+    }
+  }
+
+  &--top {
+    transform: translate(-50%, -100%);
+    margin-bottom: 7px;
+
+    &::before {
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-bottom: none;
+      left: calc(50% - 5px);
+      bottom: -5px;
+    }
+  }
+
+  &--left {
+    transform: translate(calc(-100% - 7px), -50%);
+
+    &::before {
+      border-top-color: transparent;
+      border-bottom-color: transparent;
+      border-right: none;
+      right: -5px;
+      top: calc(50% - 5px);
+    }
+  }
+
+  &--right {
+    transform: translateY(-50%);
+    margin-left: 7px;
+
+    &::before {
+      border-top-color: transparent;
+      border-bottom-color: transparent;
+      border-left: none;
+      left: -5px;
+      top: calc(50% - 5px);
+    }
+  }
+}

projects/systelab-components/src/lib/systelab-components.module.ts

@@ -99,6 +99,7 @@ import { DraggableDirective } from './directives/draggable.directive';
 import { ResizableDirective } from './directives/resizable.directive';
 import {ImageViewerComponent} from './image-viewer/image-viewer.component';
 import { NumpadDecimalNumericDirective } from './directives/numpad-decimal-numeric.directive';
+import { TooltipComponent } from './tooltip/tooltip.component';
 
 @NgModule({
 	imports:      [
@@ -200,7 +201,8 @@ import { NumpadDecimalNumericDirective } from './directives/numpad-decimal-numer
 		DraggableDirective,
 		ResizableDirective,
 		ImageViewerComponent,
-		NumpadDecimalNumericDirective
+		NumpadDecimalNumericDirective,
+		TooltipComponent
 	],
 	exports:      [
 		SliderComponent,

projects/systelab-components/src/lib/tooltip/README.md

@@ -23,5 +23,3 @@ Use systelabTooltipDelay to indicate delay showing the combo in ms. Default is 1
 
 Use systelabTooltipHideDelay to indicate delay hiding the combo in ms. Default is 1000 ms.
 
-Use systelabTooltipOnFocus to indicate that the tooltip must be opened only with the hover event. By default the trigger value is with hover and focus. By default, the variable value is true.
-

projects/systelab-components/src/lib/tooltip/tooltip.component.html

@@ -0,0 +1,6 @@
+<div class="slab-tooltip"
+     [ngClass]="['slab-tooltip--'+position]"
+     [class.slab-tooltip--visible]="visible"
+     [style.left]="left + 'px'"
+     [style.top]="top + 'px'" [innerHTML]="tooltip">
+</div>

projects/systelab-components/src/lib/tooltip/tooltip.component.spec.ts

@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserModule, By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule } from '@angular/forms';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { TreeModule } from 'primeng/tree';
+import { HttpClientModule } from '@angular/common/http';
+import { TooltipComponent } from './tooltip.component';
+import { TooltipDirective } from './tooltip.directive';
+
+@Component({
+	selector: 'systelab-tabs-test',
+	template: `
+			<div class="m-4">
+          <systelab-button id="my-component" systelabTooltip="Tooltip on top"
+                [systelabTooltipDelay]="0" [systelabTooltipHideDelay]="0">Tooltip on top</systelab-button>
+      </div>
+	          `,
+	styles:   []
+})
+export class TooltipTestComponent {
+}
+
+describe('Systelab Tooltip', () => {
+	let fixture: ComponentFixture<TooltipTestComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports:      [BrowserModule,
+				BrowserAnimationsModule,
+				FormsModule,
+				DragDropModule,
+				OverlayModule,
+				TreeModule,
+				HttpClientModule],
+			declarations: [TooltipDirective, TooltipComponent, TooltipTestComponent]
+		})
+			.compileComponents();
+	});
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(TooltipTestComponent);
+		fixture.detectChanges();
+	});
+
+	it('should instantiate', () => {
+		expect(fixture.componentInstance)
+			.toBeDefined();
+	});
+
+	it('should show and hide the tooltip', async () => {
+		await fixture.whenStable();
+		const button = fixture.debugElement.query(By.css('#my-component'));
+
+		expect(isPopupVisible()).toBeFalsy();
+
+		button.triggerEventHandler('mouseenter', {});
+		fixture.detectChanges();
+
+		expect(isPopupVisible()).toBeTruthy();
+
+		button.triggerEventHandler('mouseleave', {});
+		fixture.detectChanges();
+
+		expect(isPopupVisible()).toBeFalsy();
+	});
+});
+
+function isPopupVisible() {
+	return (document.querySelector('systelab-tooltip') !== null);
+}

projects/systelab-components/src/lib/tooltip/tooltip.component.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'systelab-tooltip',
+	templateUrl: 'tooltip.component.html'
+})
+export class TooltipComponent {
+
+	public position = 'top';
+	public tooltip = '';
+	public left = 0;
+	public top = 0;
+	public visible = false;
+}