diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html
index 6940cffc1f..a3030dec79 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/action-button-basic-config.component.html
@@ -27,7 +27,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.action-button.behavior</div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.action-button.on-click-hint' | translate}}" translate>widgets.action-button.on-click</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.action-button.on-click-hint' | translate}}">{{ 'widgets.action-button.on-click' | translate}}</div>
       <tb-widget-action-settings fxFlex
                                  panelTitle="widgets.action-button.on-click"
                                  [callbacks]="callbacks"
@@ -36,7 +36,7 @@
       </tb-widget-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.activated-state-hint' | translate}}" translate>widgets.button-state.activated-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.activated-state-hint' | translate}}">{{ 'widgets.button-state.activated-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.button-state.activated-state"
                                     [valueType]="valueType.BOOLEAN"
@@ -47,7 +47,7 @@
                                     formControlName="activatedState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}">{{ 'widgets.button-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.button-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html
index 4523ad0efd..a1ff1c067b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html
@@ -20,7 +20,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.command-button.behavior</div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.command-button.on-click-hint' | translate}}" translate>widgets.command-button.on-click</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.command-button.on-click-hint' | translate}}">{{ 'widgets.command-button.on-click' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.command-button.on-click"
                                     [aliasController]="aliasController"
@@ -29,7 +29,7 @@
                                     formControlName="onClickState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}">{{ 'widgets.button-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.button-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
index 9003b70fe0..df9934e554 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
@@ -20,7 +20,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.power-button.behavior</div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}">{{ 'widgets.rpc-state.initial-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.initial-state"
                                     [valueType]="valueType.BOOLEAN"
@@ -33,7 +33,7 @@
                                     formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}" translate>widgets.power-button.power-on</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}">{{ 'widgets.power-button.power-on' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.power-button.power-on"
                                     [aliasController]="aliasController"
@@ -42,7 +42,7 @@
                                     formControlName="onUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}" translate>widgets.power-button.power-off</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}">{{ 'widgets.power-button.power-off' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.power-button.power-off"
                                     [aliasController]="aliasController"
@@ -51,7 +51,7 @@
                                     formControlName="offUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}">{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
index a615a022d4..79a472cb62 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
@@ -20,7 +20,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.toggle-button.behavior</div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}">{{ 'widgets.rpc-state.initial-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.initial-state"
                                     [valueType]="valueType.BOOLEAN"
@@ -33,7 +33,7 @@
                                     formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.check-hint' | translate}}" translate>widgets.toggle-button.check</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.check-hint' | translate}}">{{ 'widgets.toggle-button.check' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.toggle-button.check"
                                     [aliasController]="aliasController"
@@ -42,7 +42,7 @@
                                     formControlName="checkState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.uncheck-hint' | translate}}" translate>widgets.toggle-button.uncheck</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.uncheck-hint' | translate}}">{{ 'widgets.toggle-button.uncheck' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.toggle-button.uncheck"
                                     [aliasController]="aliasController"
@@ -51,7 +51,7 @@
                                     formControlName="uncheckState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}">{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
index 57eb184009..b78e265d52 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
@@ -20,7 +20,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.status-widget.behavior</div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}">{{ 'widgets.rpc-state.initial-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.initial-state"
                                     [valueType]="valueType.BOOLEAN"
@@ -33,7 +33,7 @@
                                     formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}">{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
index c6ac3abb45..fb36c32be7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
@@ -20,7 +20,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.single-switch.behavior</div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}">{{ 'widgets.rpc-state.initial-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.initial-state"
                                     [valueType]="valueType.BOOLEAN"
@@ -33,7 +33,7 @@
                                     formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-on-hint' | translate}}" translate>widgets.rpc-state.turn-on</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-on-hint' | translate}}">{{ 'widgets.rpc-state.turn-on' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.turn-on"
                                     [aliasController]="aliasController"
@@ -42,7 +42,7 @@
                                     formControlName="onUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-off-hint' | translate}}" translate>widgets.rpc-state.turn-off</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-off-hint' | translate}}">{{ 'widgets.rpc-state.turn-off' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.turn-off"
                                     [aliasController]="aliasController"
@@ -51,7 +51,7 @@
                                     formControlName="offUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}">{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
index d9d0694bdd..edd05c6763 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
@@ -20,7 +20,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.slider.behavior</div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}" translate>widgets.slider.initial-value</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}">{{ 'widgets.slider.initial-value' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.slider.initial-value"
                                     [valueType]="valueType.DOUBLE"
@@ -30,7 +30,7 @@
                                     formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}">{{ 'widgets.slider.on-value-change' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.slider.on-value-change"
                                     [valueType]="valueType.DOUBLE"
@@ -40,7 +40,7 @@
                                     formControlName="valueChange"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}">{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html
index 8b95c0bd3a..31bed344b7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel/mapping-data-keys-panel.component.html
@@ -39,8 +39,8 @@
                     <div class="tb-form-panel-title" translate>gateway.platform-side</div>
                     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
                       <div class="fixed-title-width tb-required"
-                           tb-hint-tooltip-icon="{{ 'gateway.JSONPath-hint' | translate }}" translate>
-                        gateway.key
+                           tb-hint-tooltip-icon="{{ 'gateway.JSONPath-hint' | translate }}">
+                        {{ 'gateway.key' | translate }}
                       </div>
                       <div class="tb-flex no-gap">
                         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -97,8 +97,8 @@
                     </div>
                     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
                       <div class="fixed-title-width tb-required"
-                           tb-hint-tooltip-icon="{{ 'gateway.JSONPath-hint' | translate }}" translate>
-                        gateway.value
+                           tb-hint-tooltip-icon="{{ 'gateway.JSONPath-hint' | translate }}">
+                        {{ 'gateway.value' | translate }}
                       </div>
                       <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-flex no-gap">
                         <input matInput required formControlName="value"
@@ -158,8 +158,8 @@
                 </div>
                 <div class="tb-form-panel no-border no-padding" *ngIf="keysType === MappingKeysType.RPC_METHODS">
                   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.method-name' | translate }}" translate>
-                      gateway.method-name
+                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.hints.method-name' | translate }}">
+                      {{ 'gateway.method-name' | translate }}
                     </div>
                     <div class="tb-flex no-gap">
                       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
index 48e280bc67..7ebfb700bf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html
@@ -61,11 +61,11 @@
       <table mat-table [dataSource]="dataSource">
         <ng-container [matColumnDef]="column.def" *ngFor="let column of mappingColumns; let i = index">
           <mat-header-cell *matHeaderCellDef class="table-value-column"
-                           [class.request-column]="mappingType !== mappingTypeEnum.DATA">
+                           [class.request-column]="mappingType === mappingTypeEnum.REQUESTS">
             {{ column.title | translate }}
           </mat-header-cell>
-          <mat-cell *matCellDef="let mapping" class="table-value-column"
-                    [class.request-column]="mappingType !== mappingTypeEnum.DATA">
+          <mat-cell tbTruncateTooltip *matCellDef="let mapping" class="table-value-column"
+                    [class.request-column]="mappingType === mappingTypeEnum.REQUESTS">
             {{ mapping[column.def] }}
           </mat-cell>
         </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.ts
index 7042e5ae38..3e4ce09031 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.ts
@@ -58,6 +58,7 @@ import { isDefinedAndNotNull, isUndefinedOrNull } from '@core/utils';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { SharedModule } from '@shared/shared.module';
 import { CommonModule } from '@angular/common';
+import { TooltipDirective } from '@shared/directives/public-api';
 
 @Component({
   selector: 'tb-mapping-table',
@@ -77,7 +78,7 @@ import { CommonModule } from '@angular/common';
     }
   ],
   standalone: true,
-  imports: [CommonModule, SharedModule]
+  imports: [CommonModule, SharedModule, TooltipDirective]
 })
 export class MappingTableComponent implements ControlValueAccessor, Validator, AfterViewInit, OnInit, OnDestroy {
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html
index 43b15de06c..dbabe3acf6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html
@@ -18,7 +18,7 @@
 <div class="tb-form-panel no-border no-padding padding-top" [formGroup]="serverConfigFormGroup">
   <div class="server-settings">
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="server-conf-field-title" translate>gateway.server-url</div>
+      <div class="fixed-title-width" tbTruncateTooltip translate>gateway.server-url</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <input matInput name="value" formControlName="url" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -35,8 +35,8 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="server-conf-field-title" tb-hint-tooltip-icon="{{ 'gateway.hints.opcua-timeout' | translate }}" translate>
-        gateway.timeout
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.opcua-timeout' | translate }}">
+        <div tbTruncateTooltip>{{ 'gateway.timeout' | translate }}</div>
       </div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -55,7 +55,7 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="server-conf-field-title" translate>gateway.security</div>
+      <div class="fixed-title-width" tbTruncateTooltip translate>gateway.security</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="security">
@@ -65,8 +65,8 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="server-conf-field-title" tb-hint-tooltip-icon="{{ 'gateway.hints.scan-period' | translate }}" translate>
-        gateway.scan-period
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.scan-period' | translate }}">
+        <div tbTruncateTooltip>{{ 'gateway.scan-period' | translate }}</div>
       </div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -86,8 +86,8 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="server-conf-field-title" tb-hint-tooltip-icon="{{ 'gateway.hints.sub-check-period' | translate }}" translate>
-        gateway.sub-check-period
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.sub-check-period' | translate }}">
+        <div tbTruncateTooltip>{{ 'gateway.sub-check-period' | translate }}</div>
       </div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -110,7 +110,7 @@
   <div class="tb-form-row" fxLayoutAlign="space-between center">
     <mat-slide-toggle class="mat-slide" formControlName="enableSubscriptions">
       <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.enable-subscription' | translate }}">
-        {{ 'gateway.enable-subscription' | translate }}
+        <div tbTruncateTooltip>{{ 'gateway.enable-subscription' | translate }}</div>
       </mat-label>
     </mat-slide-toggle>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss
index 64e886ffef..416f368279 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss
@@ -17,12 +17,4 @@
   width: 100%;
   height: 100%;
   display: block;
-
-  .server-conf-field-title {
-    min-width: 250px;
-    width: 30%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.ts
index 98a36182a6..66af025267 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.ts
@@ -36,6 +36,7 @@ import { CommonModule } from '@angular/common';
 import { SecurityConfigComponent } from '@home/components/widget/lib/gateway/connectors-configuration/public-api';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { TooltipDirective } from '@shared/directives/public-api';
 
 @Component({
   selector: 'tb-server-config',
@@ -59,6 +60,7 @@ import { takeUntil } from 'rxjs/operators';
     CommonModule,
     SharedModule,
     SecurityConfigComponent,
+    TooltipDirective,
   ]
 })
 export class ServerConfigComponent implements ControlValueAccessor, Validator, OnDestroy {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html
index 37f7b1422e..b348b49252 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html
@@ -18,8 +18,8 @@
 <div class="tb-form-panel no-border no-padding padding-top" [formGroup]="workersConfigFormGroup">
   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
     <div class="fixed-title-width tb-required" [style.width.%]="50"
-         tb-hint-tooltip-icon="{{ 'gateway.max-number-of-workers-hint' | translate }}" translate>
-      gateway.max-number-of-workers
+         tb-hint-tooltip-icon="{{ 'gateway.max-number-of-workers-hint' | translate }}">
+      <div tbTruncateTooltip>{{ 'gateway.max-number-of-workers' | translate }}</div>
     </div>
     <div class="tb-flex no-gap">
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -40,8 +40,8 @@
   </div>
   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
     <div class="fixed-title-width tb-required" [style.width.%]="50"
-         tb-hint-tooltip-icon="{{ 'gateway.max-messages-queue-for-worker-hint' | translate }}" translate>
-      gateway.max-messages-queue-for-worker
+         tb-hint-tooltip-icon="{{ 'gateway.max-messages-queue-for-worker-hint' | translate }}">
+      <div tbTruncateTooltip>{{ 'gateway.max-messages-queue-for-worker' | translate }}</div>
     </div>
     <div class="tb-flex no-gap">
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.ts
index 9a37bdb07c..c05b7c32b6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.ts
@@ -33,6 +33,7 @@ import { CommonModule } from '@angular/common';
 import { WorkersConfig } from '@home/components/widget/lib/gateway/gateway-widget.models';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { TooltipDirective } from '@shared/directives/tooltip/tooltip.directive';
 
 @Component({
   selector: 'tb-workers-config-control',
@@ -42,6 +43,7 @@ import { takeUntil } from 'rxjs/operators';
   imports: [
     CommonModule,
     SharedModule,
+    TooltipDirective,
   ],
   providers: [
     {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
index 35ac90f671..17c002115c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
@@ -19,7 +19,7 @@
   <mat-toolbar color="primary">
     <h2>{{ MappingTypeTranslationsMap.get(this.data?.mappingType) | translate}}</h2>
     <span fxFlex></span>
-    <div [tb-help]="helpLinkId()"></div>
+    <div [tb-help]="HelpLinkByMappingTypeMap.get(this.data.mappingType)"></div>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -57,8 +57,8 @@
             </div>
           </div>
           <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.response-topic-Qos-hint' | translate }}" translate>
-              gateway.mqtt-qos
+            <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.response-topic-Qos-hint' | translate }}">
+              {{ 'gateway.mqtt-qos' | translate }}
             </div>
             <div class="tb-flex no-gap">
               <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -140,8 +140,8 @@
                 <div class="tb-form-panel no-border no-padding" *ngIf="converterType === ConvertorTypeEnum.CUSTOM">
                   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
                     <div class="fixed-title-width tb-required"
-                         tb-hint-tooltip-icon="{{ 'gateway.extension-hint' | translate }}" translate>
-                      gateway.extension
+                         tb-hint-tooltip-icon="{{ 'gateway.extension-hint' | translate }}">
+                      {{ 'gateway.extension' | translate }}
                     </div>
                     <div class="tb-flex no-gap">
                       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -369,8 +369,8 @@
                 <ng-template [ngSwitchCase]="RequestTypeEnum.ATTRIBUTE_UPDATE">
                   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
                     <div class="fixed-title-width tb-required"
-                         tb-hint-tooltip-icon="{{ 'gateway.device-name-filter-hint' | translate }}" translate>
-                      gateway.device-name-filter
+                         tb-hint-tooltip-icon="{{ 'gateway.device-name-filter-hint' | translate }}">
+                      {{ 'gateway.device-name-filter' | translate }}
                     </div>
                     <div class="tb-flex no-gap">
                       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -388,8 +388,8 @@
                     </div>
                   </div>
                   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.attribute-filter-hint' | translate }}" translate>
-                      gateway.attribute-filter
+                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.attribute-filter-hint' | translate }}">
+                      {{ 'gateway.attribute-filter' | translate }}
                     </div>
                     <div class="tb-flex no-gap">
                       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -472,8 +472,8 @@
                     </tb-toggle-select>
                   </div>
                   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.device-name-filter-hint' | translate }}" translate>
-                      gateway.device-name-filter
+                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.device-name-filter-hint' | translate }}">
+                      {{ 'gateway.device-name-filter' | translate }}
                     </div>
                     <div class="tb-flex no-gap">
                       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -491,8 +491,8 @@
                     </div>
                   </div>
                   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.method-filter-hint' | translate }}" translate>
-                      gateway.method-filter
+                    <div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.method-filter-hint' | translate }}">
+                      {{ 'gateway.method-filter' | translate }}
                     </div>
                     <div class="tb-flex no-gap">
                       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -580,8 +580,8 @@
                       </div>
                     </div>
                     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.response-topic-Qos-hint' | translate }}" translate>
-                        gateway.response-topic-Qos
+                      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.response-topic-Qos-hint' | translate }}">
+                        {{ 'gateway.response-topic-Qos' | translate }}
                       </div>
                       <mat-form-field class="tb-flex" appearance="outline" subscriptSizing="dynamic">
                         <mat-select formControlName="responseTopicQoS">
@@ -618,8 +618,8 @@
         <ng-template [ngSwitchCase]="MappingType.OPCUA">
           <div class="tb-form-row column-xs" fxLayoutAlign="center">
             <div class="tb-flex no-flex align-center" translate>
-              <div class="tb-required" tb-hint-tooltip-icon="{{ 'gateway.device-node-hint' | translate }}" translate>
-                gateway.device-node
+              <div class="tb-required" tb-hint-tooltip-icon="{{ 'gateway.device-node-hint' | translate }}">
+                {{ 'gateway.device-node' | translate }}
               </div>
             </div>
             <div class="tb-flex device-config">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss
index 190422eeb0..4212e8f834 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss
@@ -47,6 +47,7 @@
       .mdc-evolution-chip-set__chips {
         justify-content: flex-end;
         align-items: center;
+        flex-wrap: nowrap;
       }
     }
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
index 3812fa161e..0e177df527 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
@@ -28,6 +28,7 @@ import {
   ConvertorTypeTranslationsMap,
   DataConversionTranslationsMap,
   DeviceInfoType,
+  HelpLinkByMappingTypeMap,
   MappingHintTranslationsMap,
   MappingInfo,
   MappingKeysAddKeyTranslationsMap,
@@ -97,6 +98,8 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
 
   DataConversionTranslationsMap = DataConversionTranslationsMap;
 
+  HelpLinkByMappingTypeMap = HelpLinkByMappingTypeMap;
+
   keysPopupClosed = true;
 
   private destroy$ = new Subject<void>();
@@ -187,10 +190,6 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
     }
   }
 
-  helpLinkId(): string {
-    return 'https://thingsboard.io/docs/iot-gateway/config/mqtt/#section-mapping';
-  }
-
   cancel(): void {
     if (this.keysPopupClosed) {
       this.dialogRef.close(null);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
index 9805008503..0ee5f620ba 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
@@ -540,6 +540,14 @@ export const MappingHintTranslationsMap = new Map<MappingType, string>(
   ]
 );
 
+export const HelpLinkByMappingTypeMap = new Map<MappingType, string>(
+  [
+    [MappingType.DATA, 'https://thingsboard.io/docs/iot-gateway/config/mqtt/#section-mapping'],
+    [MappingType.OPCUA, 'https://thingsboard.io/docs/iot-gateway/config/opc-ua/#section-mapping'],
+    [MappingType.REQUESTS, 'https://thingsboard.io/docs/iot-gateway/config/mqtt/#section-mapping']
+  ]
+);
+
 export const QualityTypes = [0, 1 ,2];
 
 export const QualityTypeTranslationsMap = new Map<number, string>(
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html
index 265a9c2501..a8cdf55efc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/action-button-widget-settings.component.html
@@ -19,7 +19,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.action-button.behavior</div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.activated-state-hint' | translate}}" translate>widgets.button-state.activated-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.activated-state-hint' | translate}}">{{ 'widgets.button-state.activated-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.button-state.activated-state"
                                     [valueType]="valueType.BOOLEAN"
@@ -30,7 +30,7 @@
                                     formControlName="activatedState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}">{{ 'widgets.button-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.button-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html
index 29f3833983..52608c24f4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/command-button-widget-settings.component.html
@@ -19,7 +19,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.command-button.behavior</div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.command-button.on-click-hint' | translate}}" translate>widgets.command-button.on-click</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.command-button.on-click-hint' | translate}}">{{ 'widgets.command-button.on-click' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.command-button.on-click"
                                     [aliasController]="aliasController"
@@ -28,7 +28,7 @@
                                     formControlName="onClickState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}" translate>widgets.button-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.button-state.disabled-state-hint' | translate}}">{{ 'widgets.button-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.button-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
index 9552e59a87..87e72e6a4e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/power-button-widget-settings.component.html
@@ -19,7 +19,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.power-button.behavior</div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}">{{ 'widgets.rpc-state.initial-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.initial-state"
                                     [valueType]="valueType.BOOLEAN"
@@ -32,7 +32,7 @@
                                     formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}" translate>widgets.power-button.power-on</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}">{{ 'widgets.power-button.power-on' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.power-button.power-on "
                                     [aliasController]="aliasController"
@@ -41,7 +41,7 @@
                                     formControlName="onUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}" translate>widgets.power-button.power-off</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}">{{ 'widgets.power-button.power-off' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.power-button.power-off"
                                     [aliasController]="aliasController"
@@ -50,7 +50,7 @@
                                     formControlName="offUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}">{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
index a5d12ee890..4d42b83f35 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/button/toggle-button-widget-settings.component.html
@@ -19,7 +19,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.toggle-button.behavior</div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}">{{ 'widgets.rpc-state.initial-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.initial-state"
                                     [valueType]="valueType.BOOLEAN"
@@ -32,7 +32,7 @@
                                     formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.check-hint' | translate}}" translate>widgets.toggle-button.check</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.check-hint' | translate}}">{{ 'widgets.toggle-button.check' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.toggle-button.check"
                                     [aliasController]="aliasController"
@@ -41,7 +41,7 @@
                                     formControlName="checkState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.uncheck-hint' | translate}}" translate>widgets.toggle-button.uncheck</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.toggle-button.uncheck-hint' | translate}}">{{ 'widgets.toggle-button.uncheck' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.toggle-button.uncheck"
                                     [aliasController]="aliasController"
@@ -50,7 +50,7 @@
                                     formControlName="uncheckState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}">{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
index edb3651d38..40734d2638 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/get-value-action-settings-panel.component.html
@@ -31,7 +31,7 @@
     <ng-container [ngSwitch]="getValueSettingsFormGroup.get('action').value">
       <ng-template [ngSwitchCase]="getValueAction.DO_NOTHING">
         <div class="tb-form-row space-between">
-          <div tb-hint-tooltip-icon="{{'widgets.value-action.init-value-hint' | translate}}" translate>widgets.value-action.value</div>
+          <div tb-hint-tooltip-icon="{{'widgets.value-action.init-value-hint' | translate}}">{{ 'widgets.value-action.value' | translate }}</div>
           <tb-value-input [valueType]="valueType"
                           [trueLabel]="trueLabel"
                           [falseLabel]="falseLabel"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
index 40f26c6e9c..195bd24f3f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/indicator/status-widget-state-settings.component.html
@@ -62,14 +62,14 @@
          [fxLayoutAlign.lt-md]="layout !== StatusWidgetLayout.icon ? 'space-between center': 'start center'"
          style="gap: 12px;">
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <div tb-hint-tooltip-icon="{{'widgets.status-widget.primary-color-hint' | translate}}" translate>widgets.status-widget.primary</div>
+        <div tb-hint-tooltip-icon="{{'widgets.status-widget.primary-color-hint' | translate}}">{{ 'widgets.status-widget.primary' | translate }}</div>
         <tb-color-input asBoxInput
                         formControlName="primaryColor">
         </tb-color-input>
       </div>
       <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical fxHide.lt-md></mat-divider>
       <div *ngIf="layout !== StatusWidgetLayout.icon" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
+        <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}">{{ 'widgets.status-widget.secondary' | translate }}</div>
         <tb-color-input asBoxInput
                         formControlName="secondaryColor">
         </tb-color-input>
@@ -88,14 +88,14 @@
          [fxLayoutAlign.lt-md]="layout !== StatusWidgetLayout.icon ? 'space-between center': 'start center'"
          style="gap: 12px;">
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <div tb-hint-tooltip-icon="{{'widgets.status-widget.primary-color-hint' | translate}}" translate>widgets.status-widget.primary</div>
+        <div tb-hint-tooltip-icon="{{'widgets.status-widget.primary-color-hint' | translate}}">{{ 'widgets.status-widget.primary' | translate }}</div>
         <tb-color-input asBoxInput
                         formControlName="primaryColorDisabled">
         </tb-color-input>
       </div>
       <mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical fxHide.lt-md></mat-divider>
       <div *ngIf="layout !== StatusWidgetLayout.icon" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
+        <div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}">{{ 'widgets.status-widget.secondary' | translate }}</div>
         <tb-color-input asBoxInput
                         formControlName="secondaryColorDisabled">
         </tb-color-input>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
index 9208efd68a..d5b732b6bb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/single-switch-widget-settings.component.html
@@ -19,7 +19,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.single-switch.behavior</div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}">{{ 'widgets.rpc-state.initial-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.initial-state"
                                     [valueType]="valueType.BOOLEAN"
@@ -32,7 +32,7 @@
                                     formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-on-hint' | translate}}" translate>widgets.rpc-state.turn-on</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-on-hint' | translate}}">{{ 'widgets.rpc-state.turn-on' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.turn-on"
                                     [aliasController]="aliasController"
@@ -41,7 +41,7 @@
                                     formControlName="onUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-off-hint' | translate}}" translate>widgets.rpc-state.turn-off</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-off-hint' | translate}}">{{ 'widgets.rpc-state.turn-off' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.turn-off"
                                     [aliasController]="aliasController"
@@ -50,7 +50,7 @@
                                     formControlName="offUpdateState"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}">{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
index f516fd732b..be2a50f9d7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
@@ -19,7 +19,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.slider.behavior</div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}" translate>widgets.slider.initial-value</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}">{{ 'widgets.slider.initial-value' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.slider.initial-value"
                                     [valueType]="valueType.DOUBLE"
@@ -29,7 +29,7 @@
                                     formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row space-between">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}">{{ 'widgets.slider.on-value-change' | translate }}</div>
       <tb-set-value-action-settings fxFlex
                                     panelTitle="widgets.slider.on-value-change"
                                     [valueType]="valueType.DOUBLE"
@@ -39,7 +39,7 @@
                                     formControlName="valueChange"></tb-set-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}">{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
index 180340881d..2e63d600eb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html
@@ -19,7 +19,7 @@
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.status-widget.behavior</div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}">{{ 'widgets.rpc-state.initial-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.initial-state"
                                     [valueType]="valueType.BOOLEAN"
@@ -32,7 +32,7 @@
                                     formControlName="initialState"></tb-get-value-action-settings>
     </div>
     <div class="tb-form-row">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
+      <div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}">{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
       <tb-get-value-action-settings fxFlex
                                     panelTitle="widgets.rpc-state.disabled-state"
                                     [valueType]="valueType.BOOLEAN"
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 300a7f54d1..e90b0539ee 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -267,13 +267,13 @@
     <div *ngIf="displayAppearanceDataSettings" class="tb-form-panel" [formGroup]="widgetSettings">
       <div class="tb-form-panel-title" translate>widget-config.data-settings</div>
       <div *ngIf="displayUnitsConfig" class="tb-form-row space-between">
-        <div tb-hint-tooltip-icon="{{'widget-config.default-data-key-parameter-hint' | translate}}" translate>widget-config.units-by-default</div>
+        <div tb-hint-tooltip-icon="{{'widget-config.default-data-key-parameter-hint' | translate}}">{{ 'widget-config.units-by-default' | translate }}</div>
         <tb-unit-input
           formControlName="units">
         </tb-unit-input>
       </div>
       <div *ngIf="displayUnitsConfig" class="tb-form-row space-between">
-        <div tb-hint-tooltip-icon="{{'widget-config.default-data-key-parameter-hint' | translate}}" translate>widget-config.decimals-by-default</div>
+        <div tb-hint-tooltip-icon="{{'widget-config.default-data-key-parameter-hint' | translate}}">{{ 'widget-config.decimals-by-default' | translate }}</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html
index 32b66fd2b7..f2413f0ad7 100644
--- a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html
+++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<ng-content></ng-content>
+<ng-content class="tb-hint-tooltip-content"></ng-content>
 <tb-icon class="tb-hint-tooltip-icon tb-mat-18"
          *ngIf="tooltipText"
          matTooltip="{{ tooltipText }}"
diff --git a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss
index 7ed9925300..b83c2ff1b9 100644
--- a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss
+++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss
@@ -21,11 +21,19 @@
 }
 
 :host {
+  .tb-hint-tooltip-content {
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: fit-content;
+  }
+
   .tb-hint-tooltip-icon {
     color: #E0E0E0;
     overflow: visible;
     order: 3;
     margin-left: 4px;
+    flex-shrink: 0;
+
     &:hover {
       color: #9E9E9E;
     }
diff --git a/ui-ngx/src/app/shared/directives/public-api.ts b/ui-ngx/src/app/shared/directives/public-api.ts
new file mode 100644
index 0000000000..a82428fc19
--- /dev/null
+++ b/ui-ngx/src/app/shared/directives/public-api.ts
@@ -0,0 +1,17 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+export * from './tooltip/tooltip.directive';
diff --git a/ui-ngx/src/app/shared/directives/tooltip/tooltip.directive.ts b/ui-ngx/src/app/shared/directives/tooltip/tooltip.directive.ts
new file mode 100644
index 0000000000..448b7e52de
--- /dev/null
+++ b/ui-ngx/src/app/shared/directives/tooltip/tooltip.directive.ts
@@ -0,0 +1,109 @@
+///
+/// Copyright © 2016-2024 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import {
+  AfterViewInit,
+  Directive,
+  ElementRef,
+  Input,
+  OnDestroy,
+  OnInit,
+  Renderer2,
+} from '@angular/core';
+import { fromEvent, Subject } from 'rxjs';
+import { filter, takeUntil, tap } from 'rxjs/operators';
+import { MatTooltip, TooltipPosition } from '@angular/material/tooltip';
+
+@Directive({
+  standalone: true,
+  selector: '[tbTruncateTooltip]',
+  providers: [MatTooltip],
+
+})
+export class TooltipDirective implements OnInit, AfterViewInit, OnDestroy {
+  @Input('tbTruncateTooltip') text: string;
+  @Input() tooltipEnabled = true;
+  @Input() position: TooltipPosition = 'above';
+
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private tooltip: MatTooltip
+  ) {}
+
+  ngOnInit(): void {
+    this.observeMouseEvents();
+    this.applyTruncationStyles();
+  }
+
+  ngAfterViewInit(): void {
+    if (!this.text) {
+      this.text = this.elementRef.nativeElement.innerText;
+    }
+
+    this.tooltip.position = this.position;
+  }
+
+  ngOnDestroy(): void {
+    if (this.tooltip._isTooltipVisible()) {
+      this.hideTooltip();
+    }
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private observeMouseEvents(): void {
+    fromEvent(this.elementRef.nativeElement, 'mouseenter')
+      .pipe(
+        filter(() => this.tooltipEnabled),
+        filter(() => this.isOverflown(this.elementRef.nativeElement)),
+        tap(() => this.showTooltip()),
+        takeUntil(this.destroy$),
+      )
+      .subscribe();
+    fromEvent(this.elementRef.nativeElement, 'mouseleave')
+      .pipe(
+        filter(() => this.tooltipEnabled),
+        filter(() => this.tooltip._isTooltipVisible()),
+        tap(() => this.hideTooltip()),
+        takeUntil(this.destroy$),
+      )
+      .subscribe();
+  }
+
+  private applyTruncationStyles(): void {
+    this.renderer.setStyle(this.elementRef.nativeElement, 'white-space', 'nowrap');
+    this.renderer.setStyle(this.elementRef.nativeElement, 'overflow', 'hidden');
+    this.renderer.setStyle(this.elementRef.nativeElement, 'text-overflow', 'ellipsis');
+  }
+
+  private isOverflown(element: HTMLElement): boolean {
+    return element.clientWidth < element.scrollWidth;
+  }
+
+  private showTooltip(): void {
+    this.tooltip.message = this.text;
+
+    this.renderer.setAttribute(this.elementRef.nativeElement, 'matTooltip', this.text);
+    this.tooltip.show();
+  }
+
+  private hideTooltip(): void {
+    this.tooltip.hide();
+  }
+}