diff --git a/src/lib/help-mode/help-button/help-button.component.html b/src/lib/help-mode/help-button/help-button.component.html index 9f53692..1e611bb 100644 --- a/src/lib/help-mode/help-button/help-button.component.html +++ b/src/lib/help-mode/help-button/help-button.component.html @@ -3,6 +3,7 @@ class="help-mode-slide-toggle" [class.dialog-toggle]="dialogButton" [class.active]="helpModeService.isHelpModeActive" + [matTooltip]="buttonTooltip" >
diff --git a/src/lib/help-mode/help-button/help-button.component.ts b/src/lib/help-mode/help-button/help-button.component.ts index a331ddf..437669b 100644 --- a/src/lib/help-mode/help-button/help-button.component.ts +++ b/src/lib/help-mode/help-button/help-button.component.ts @@ -2,13 +2,16 @@ import { AfterViewInit, Component, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core'; import { MatIcon } from '@angular/material/icon'; import { HelpModeService } from '../help-mode.service'; +import { MatTooltip } from '@angular/material/tooltip'; +import { TranslateService } from '@ngx-translate/core'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; @Component({ selector: 'iqser-help-button', templateUrl: './help-button.component.html', styleUrls: ['./help-button.component.scss'], standalone: true, - imports: [MatIcon], + imports: [MatIcon, MatTooltip], }) export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy { @Input() dialogButton = true; @@ -16,6 +19,7 @@ export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy { constructor( private readonly _elementRef: ElementRef, + private readonly _translateService: TranslateService, readonly helpModeService: HelpModeService, ) {} @@ -68,4 +72,9 @@ export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy { this.helpModeButton?.style.setProperty('top', `${currentComponentRect.top}px`); this.helpModeButton?.style.setProperty('left', `${currentComponentRect.left}px`); } + + get buttonTooltip() { + const translation = this.helpModeService.isHelpModeActive ? _('help-button.disable') : _('help-button.enable'); + return this._translateService.instant(translation); + } }