diff --git a/packages/tooltip/src/button-tooltip.js b/packages/tooltip/src/button-tooltip.js index 79a9be13c588e76c1ad3425ca61add47be928bf8..2a37ba574855373cbb9a283f693961eed0046d82 100644 --- a/packages/tooltip/src/button-tooltip.js +++ b/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}"> diff --git a/packages/tooltip/src/dbp-tooltip-demo.js b/packages/tooltip/src/dbp-tooltip-demo.js index 95dd898ac63b90d1f5b4662f5bde916ebeb8a9de..2b4d4c140a354b2c4c786852394110e0ea123f4e 100644 --- a/packages/tooltip/src/dbp-tooltip-demo.js +++ b/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> diff --git a/packages/tooltip/src/tooltip.js b/packages/tooltip/src/tooltip.js index 30363e004ccaf185697fbdfa500b5347d4ebd3f0..e9c27e90ea01eecd183b75e99dc7d7001722952b 100644 --- a/packages/tooltip/src/tooltip.js +++ b/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}">