From cc1d25bb0ca56b861573aedf8004294074aedcf9 Mon Sep 17 00:00:00 2001
From: Christina Toegl <toegl@tugraz.at>
Date: Thu, 16 Sep 2021 12:16:40 +0200
Subject: [PATCH] Fix bug with multiple initialization of tippy
---
packages/tooltip/src/info-tooltip.js | 42 +++++++++++++++-------------
1 file changed, 23 insertions(+), 19 deletions(-)
diff --git a/packages/tooltip/src/info-tooltip.js b/packages/tooltip/src/info-tooltip.js
index 33e328ec..300701b9 100644
--- a/packages/tooltip/src/info-tooltip.js
+++ b/packages/tooltip/src/info-tooltip.js
@@ -11,7 +11,6 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
constructor() {
super();
- this.tippy = '';
this.textContent = 'missing text.';
this.interactive = false;
}
@@ -25,21 +24,35 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
static get properties() {
return {
...super.properties,
- tippy: { type: Object, attribute: false },
textContent: { type: String, attribute: 'text-content' },
interactive: { type: Boolean, attribute: true },
};
}
firstUpdated() {
+ this.setOrUpdateTippy();
+ }
- tippy(this._('#info-tooltip-icon'), {
- content: this.textContent,
- appendTo: this.shadowRoot,
- interactive: this.interactive,
- allowHTML: this.interactive ? true : false,
- hideOnClick: this.interactive ? false : true,
- });
+ setOrUpdateTippy() {
+ if (this._('#info-tooltip-icon')) {
+ if (this._('#info-tooltip-icon')._tippy) {
+ this._('#info-tooltip-icon')._tippy.setProps({
+ content: this.textContent,
+ appendTo: this.shadowRoot,
+ interactive: this.interactive,
+ allowHTML: this.interactive ? true : false,
+ hideOnClick: this.interactive ? false : true,
+ });
+ } else {
+ tippy(this._('#info-tooltip-icon'), {
+ content: this.textContent,
+ appendTo: this.shadowRoot,
+ interactive: this.interactive,
+ allowHTML: this.interactive ? true : false,
+ hideOnClick: this.interactive ? false : true,
+ });
+ }
+ }
}
static get styles() {
@@ -67,22 +80,13 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
const tippy2CSS = commonUtils.getAssetURL(tippy2CSSPath);
- if (this._('#info-tooltip-icon')) {
- this.tippy = tippy(this._('#info-tooltip-icon'), {
- content: this.textContent,
- appendTo: this.shadowRoot,
- interactive: this.interactive,
- allowHTML: this.interactive ? true : false,
- hideOnClick: this.interactive ? false : true,
- });
- }
+ this.setOrUpdateTippy();
return html`
<link rel="stylesheet" href="${tippy2CSS}">
<div class="info-icon" id="info-tooltip-icon">
<dbp-icon name="information-circle"></dbp-icon>
</div>
-
`;
}
--
GitLab