fix[frontend](tooltips): moved tooltip position to body so they can be showed above any other copmonent

Author: AlexSanchez-bit

frontend/src/app/app.module.ts

@@ -4,7 +4,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
-import {NgbDatepickerConfig, NgbModalConfig} from '@ng-bootstrap/ng-bootstrap';
+import {NgbDatepickerConfig, NgbModalConfig, NgbTooltipConfig} from '@ng-bootstrap/ng-bootstrap';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 import * as moment from 'moment';
@@ -151,8 +151,9 @@ export function initTimezoneFormat(apiChecker: ApiServiceCheckerService,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AppModule {
-  constructor(private dpConfig: NgbDatepickerConfig, private config: NgbModalConfig) {
+  constructor(private dpConfig: NgbDatepickerConfig, private config: NgbModalConfig, private tooltipConfig: NgbTooltipConfig) {
     this.dpConfig.minDate = {year: moment().year() - 100, month: 1, day: 1};
     config.backdrop = 'static';
+    this.tooltipConfig.container = 'body';
   }
 }

frontend/src/environments/environment.ts

@@ -4,8 +4,8 @@
 
 export const environment = {
   production: false,
-  // SERVER_API_URL: 'https://192.168.1.18/',
-  SERVER_API_URL: 'http://localhost:8080/',
+  SERVER_API_URL: 'https://192.168.1.18/',
+  // SERVER_API_URL: 'http://localhost:8080/',
   SERVER_API_CONTEXT: '',
   SESSION_AUTH_TOKEN: window.location.host.split(':')[0].toLocaleUpperCase(),
   WEBSOCKET_URL: '//localhost:8080',

frontend/src/styles.scss

@@ -392,18 +392,18 @@ p {
 
 //tooltip
 .utm-tooltip, .utm-tooltip-top, .utm-tooltip-bottom, .utm-tooltip-left {
-  z-index: 999 !important;
   opacity: 10 !important;
+  position: absolute !important;
 }
 
 .tooltip {
-  z-index: 1240 !important;
+  z-index: 100000 !important;
 }
 
 .utm-tooltip .tooltip-inner {
   //background-color: $grey-color;
   font-size: 100%;
-  z-index: 999 !important;
+  z-index: 99999 !important;
 }
 
 .utm-tooltip-bottom .tooltip-inner {
@@ -415,19 +415,16 @@ p {
 .utm-tooltip-top .tooltip-inner {
   //background-color: $grey-color !important;
   font-size: 100%;
-  z-index: 999 !important;
 }
 
 .utm-tooltip-left .tooltip-inner {
   //background-color: $grey-color !important;
   font-size: 100%;
-  z-index: 999 !important;
 }
 
 .utm-tooltip-right .tooltip-inner {
   //background-color: $grey-color !important;
   font-size: 100%;
-  z-index: 999 !important;
 }
 
 .utm-tooltip-top .arrow::before {
@@ -676,7 +673,7 @@ app-header {
 }
 
 .popover {
-  z-index: 2065 !important;
+  z-index: 99999 !important;
 }
 
 .utm-popover-right {
@@ -726,7 +723,6 @@ app-header {
   .utm-popover-xs {
     //top: 37px !important;
     max-width: 300px !important;
-    z-index: 2062 !important;
   }
 
   .popover-header {
@@ -756,7 +752,6 @@ app-header {
   .utm-popover-xs {
     //top: 37px !important;
     max-width: 300px !important;
-    z-index: 2062 !important;
   }
 
   .popover-header {
@@ -1205,9 +1200,6 @@ $topnav-background-color: #FFFFFF;
   z-index: 2061 !important;
 }
 
-.tooltip {
-  z-index: 2062 !important;
-}
 
 .alert-warning {
   color: #232f3e !important;