Optimize tooltip components

packages/tooltip/src/button-tooltip.js

@@ -10,7 +10,6 @@ export class ButtonTooltip extends ScopedElementsMixin(DBPLitElement) {
 
     constructor() {
         super();
-        this.tippy = '';
         this.textContent = 'missing text.';
         this.buttonText = 'submit';
         this.addEventListener('click', this._handleClick);
@@ -21,7 +20,6 @@ export class ButtonTooltip extends ScopedElementsMixin(DBPLitElement) {
     static get properties() {
         return {
             ...super.properties,
-            tippy: { type: Object, attribute: false },
             textContent: { type: String, attribute: 'text-content' },
             buttonText: { type: String, attribute: 'button-text' },
             type: { type: String },
@@ -30,11 +28,23 @@ export class ButtonTooltip extends ScopedElementsMixin(DBPLitElement) {
     }
 
     firstUpdated() {
+        this.setOrUpdateTippy();
+    }
 
-        tippy(this._('#info-tooltip-button'), {
-            content: this.textContent,
-            appendTo: this.shadowRoot,
-        });
+    setOrUpdateTippy() {
+        if (this._('#info-tooltip-button')) {
+            if (this._('#info-tooltip-button')._tippy) {
+                this._('#info-tooltip-button')._tippy.setProps({
+                    content: this.textContent,
+                    appendTo: this.shadowRoot,
+                });
+            } else {
+                tippy(this._('#info-tooltip-button'), {
+                    content: this.textContent,
+                    appendTo: this.shadowRoot,
+                });
+            }
+        }
     }
 
     _handleClick(event) {
@@ -74,9 +84,7 @@ export class ButtonTooltip extends ScopedElementsMixin(DBPLitElement) {
 
         const tippy2CSS = commonUtils.getAssetURL(tippy2CSSPath);
        
-        if (this._('#info-tooltip-button')) {
-            this.tippy = tippy(this._('#info-tooltip-button'), { content: this.textContent });
-        }
+        this.setOrUpdateTippy();
 
         return html`
             <link rel="stylesheet" href="${tippy2CSS}">

packages/tooltip/src/dbp-tooltip-demo.js

@@ -50,6 +50,7 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
             css`
             h1.title {margin-bottom: 1em;}
             div.container {margin-bottom: 1.5em; padding-left:20px;}
+            .group { display: flex; flex-direction: auto; column-gap: 3px; }
             `
         ];
     }
@@ -83,12 +84,12 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
                 <div class="container">
                     <h2>Button with Tooltip</h2>
                     <p>Add a tooltip info to your submit/reset button.</p>
-                    <form action="/">
+                    <form action="/" class="group">
                         <label for="text">Text</label>
                         <input type="text" id="text" name="text" value="" placeholder="text">
-                        <dbp-button-tooltip button-text="save" text-content="submit to server"></dbp-button-tooltip>
-                        <dbp-button-tooltip button-text="reset" text-content="clear all inputs" type="reset"></dbp-button-tooltip>
-                        <dbp-button-tooltip button-text="silent" text-content="does nothing" type="btn"></dbp-button-tooltip>
+                        <div><dbp-button-tooltip button-text="save" text-content="submit to server"></dbp-button-tooltip></div>
+                        <div><dbp-button-tooltip button-text="reset" text-content="clear all inputs" type="reset"></dbp-button-tooltip></div>
+                        <div><dbp-button-tooltip button-text="silent" text-content="does nothing" type="btn"></dbp-button-tooltip></div>
                     </form>
                 </div>
             </section>

packages/tooltip/src/tooltip.js

@@ -11,7 +11,6 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
 
     constructor() {
         super();
-        this.tippy = '';
         this.textContent = 'missing text.';
         this.iconName = '';
     }
@@ -25,18 +24,29 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
     static get properties() {
         return {
             ...super.properties,
-            tippy: { type: Object, attribute: false },
             textContent: { type: String, attribute: 'text-content' },
             iconName: { type: String, attribute: 'icon-name' },
         };
     }
 
     firstUpdated() {
+        this.setOrUpdateTippy();
+    }
 
-        tippy(this._('#tooltip-icon'), {
-            content: this.textContent,
-            appendTo: this.shadowRoot,
-        });
+    setOrUpdateTippy() {
+        if (this._('#tooltip-icon')) {
+            if (this._('#tooltip-icon')._tippy) {
+                this._('#tooltip-icon')._tippy.setProps({
+                    content: this.textContent,
+                    appendTo: this.shadowRoot,
+                });
+            } else {
+                tippy(this._('#tooltip-icon'), {
+                    content: this.textContent,
+                    appendTo: this.shadowRoot,
+                });
+            }
+        }
     }
 
     static get styles() {
@@ -59,9 +69,7 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
 
         const tippy2CSS = commonUtils.getAssetURL(tippy2CSSPath);
        
-        if (this._('#tooltip-icon')) {
-            this.tippy = tippy(this._('#tooltip-icon'), { content: this.textContent });
-        }
+        this.setOrUpdateTippy();
 
         return html`
             <link rel="stylesheet" href="${tippy2CSS}">