UI: SCADA symbol editor: fix tag settings tooltip to correctly update add/edit function buttons.

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<HTMLElement>,
               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();
   }