From 6e3de7457ae73082b274d71fe04b7402837f50f1 Mon Sep 17 00:00:00 2001
From: Christina Toegl <toegl@tugraz.at>
Date: Thu, 16 Sep 2021 12:51:57 +0200
Subject: [PATCH] Optimize tooltip components
---
packages/tooltip/src/button-tooltip.js | 26 ++++++++++++++++--------
packages/tooltip/src/dbp-tooltip-demo.js | 9 ++++----
packages/tooltip/src/tooltip.js | 26 ++++++++++++++++--------
3 files changed, 39 insertions(+), 22 deletions(-)
diff --git a/packages/tooltip/src/button-tooltip.js b/packages/tooltip/src/button-tooltip.js
index 79a9be13..2a37ba57 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 95dd898a..2b4d4c14 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 30363e00..e9c27e90 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}">
--
GitLab