diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts index ef811e9746..7114712848 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-tooltip.components.ts @@ -225,6 +225,8 @@ class ScadaSymbolTagPanelComponent extends ScadaSymbolPanelComponent implements displayTagSettings = true; + private scadaSymbolTagSettingsTooltip: ITooltipsterInstance; + constructor(public element: ElementRef, private container: ViewContainerRef) { super(element); @@ -242,23 +244,9 @@ class ScadaSymbolTagPanelComponent extends ScadaSymbolPanelComponent implements if (this.displayTagSettings) { const tagSettingsButton = $(this.tagSettingsButton.nativeElement); - tagSettingsButton.tooltipster( - { - parent: this.symbolElement.tooltipContainer, - zIndex: 200, - arrow: true, - theme: ['scada-symbol', 'tb-active'], - interactive: true, - trigger: 'click', - trackOrigin: true, - trackerInterval: 100, - side: 'top', - content: '' - } - ); - - const scadaSymbolTagSettingsTooltip = tagSettingsButton.tooltipster('instance'); - setTooltipComponent(this.symbolElement, this.container, ScadaSymbolTagSettingsComponent, scadaSymbolTagSettingsTooltip); + tagSettingsButton.on('click', () => { + this.createTagSettingsTooltip(); + }); } if (!this.symbolElement.readonly) { @@ -295,6 +283,33 @@ class ScadaSymbolTagPanelComponent extends ScadaSymbolPanelComponent implements }); } + private createTagSettingsTooltip() { + if (!this.scadaSymbolTagSettingsTooltip) { + const tagSettingsButton = $(this.tagSettingsButton.nativeElement); + tagSettingsButton.tooltipster( + { + parent: this.symbolElement.tooltipContainer, + zIndex: 200, + arrow: true, + theme: ['scada-symbol', 'tb-active'], + interactive: true, + trigger: 'click', + trackOrigin: true, + trackerInterval: 100, + side: 'top', + content: '', + functionAfter: () => { + this.scadaSymbolTagSettingsTooltip.destroy(); + this.scadaSymbolTagSettingsTooltip = null; + } + } + ); + this.scadaSymbolTagSettingsTooltip = tagSettingsButton.tooltipster('instance'); + setTooltipComponent(this.symbolElement, this.container, ScadaSymbolTagSettingsComponent, this.scadaSymbolTagSettingsTooltip); + this.scadaSymbolTagSettingsTooltip.open(); + } + } + public onUpdateTag() { this.updateTag.emit(); }