From 4f8fa97a0ee75b2e3a8d12f1958519f7b8222bf8 Mon Sep 17 00:00:00 2001
From: Christina Toegl <toegl@tugraz.at>
Date: Thu, 9 Sep 2021 17:42:40 +0200
Subject: [PATCH] Change tooltip to info-tooltip and create a new tooltip
variant with custom icon
---
packages/tooltip/src/dbp-info-tooltip.js | 4 ++
packages/tooltip/src/dbp-tooltip-demo.js | 8 ++-
packages/tooltip/src/index.js | 4 +-
packages/tooltip/src/info-tooltip.js | 70 ++++++++++++++++++++++++
packages/tooltip/src/tooltip.js | 16 +++---
5 files changed, 91 insertions(+), 11 deletions(-)
create mode 100644 packages/tooltip/src/dbp-info-tooltip.js
create mode 100644 packages/tooltip/src/info-tooltip.js
diff --git a/packages/tooltip/src/dbp-info-tooltip.js b/packages/tooltip/src/dbp-info-tooltip.js
new file mode 100644
index 00000000..90c15a4e
--- /dev/null
+++ b/packages/tooltip/src/dbp-info-tooltip.js
@@ -0,0 +1,4 @@
+import * as commonUtils from '@dbp-toolkit/common/utils';
+import {InfoTooltip} from './info-tooltip';
+
+commonUtils.defineCustomElement('dbp-info-tooltip', InfoTooltip);
diff --git a/packages/tooltip/src/dbp-tooltip-demo.js b/packages/tooltip/src/dbp-tooltip-demo.js
index 2e491ca9..3cf80208 100644
--- a/packages/tooltip/src/dbp-tooltip-demo.js
+++ b/packages/tooltip/src/dbp-tooltip-demo.js
@@ -4,6 +4,7 @@ import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import * as commonUtils from '@dbp-toolkit/common/utils';
import * as commonStyles from '@dbp-toolkit/common/styles';
import {TooltipElement} from './tooltip';
+import {InfoTooltip} from './info-tooltip';
import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
@@ -18,6 +19,7 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
static get scopedElements() {
return {
'dbp-tooltip': TooltipElement,
+ 'dbp-info-tooltip': InfoTooltip,
};
}
@@ -59,7 +61,11 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
</div>
<div class="container">
<p>Mind the gap!
- <dbp-tooltip text-content="tippy tooltip demo text"></dbp-tooltip>
+ <dbp-info-tooltip text-content="tippy info tooltip demo text"></dbp-info-tooltip>
+ </p>
+
+ <p>Mind the gap!
+ <dbp-tooltip text-content="tippy tooltip demo text" icon-name="information"></dbp-tooltip>
</p>
</div>
</section>
diff --git a/packages/tooltip/src/index.js b/packages/tooltip/src/index.js
index eed58fda..9ff26091 100644
--- a/packages/tooltip/src/index.js
+++ b/packages/tooltip/src/index.js
@@ -1,3 +1,5 @@
+import {InfoTooltip} from './info-tooltip.js';
import {TooltipElement} from './tooltip.js';
-export {TooltipElement};
\ No newline at end of file
+export {InfoTooltip as InfoTooltip};
+export {TooltipElement as TooltipElement};
\ No newline at end of file
diff --git a/packages/tooltip/src/info-tooltip.js b/packages/tooltip/src/info-tooltip.js
new file mode 100644
index 00000000..3af0473b
--- /dev/null
+++ b/packages/tooltip/src/info-tooltip.js
@@ -0,0 +1,70 @@
+import {css, html} from 'lit-element';
+import {ScopedElementsMixin} from '@open-wc/scoped-elements';
+import * as commonUtils from '@dbp-toolkit/common/utils';
+import * as commonStyles from '@dbp-toolkit/common/styles';
+import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
+import tippy from 'tippy.js';
+import tippy2CSSPath from 'tippy.js/dist/tippy.css';
+
+export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
+
+ constructor() {
+ super();
+ this.tippy = '';
+ this.textContent = '';
+ }
+
+ static get properties() {
+ return {
+ ...super.properties,
+ tippy: { type: Object, attribute: false },
+ textContent: { type: String, attribute: 'text-content' },
+ };
+ }
+
+ firstUpdated() {
+
+ tippy(this._('#info-tooltip-icon'), {
+ content: this.textContent,
+ appendTo: this.shadowRoot,
+ });
+ }
+
+ static get styles() {
+ // language=css
+ return css`
+ ${commonStyles.getThemeCSS()}
+ ${commonStyles.getGeneralCSS(false)}
+ ${commonStyles.getButtonCSS()}
+
+ .info-icon {
+ display: inline;
+ opacity: 0.7;
+ }
+
+ `;
+ }
+
+ render() {
+
+ const tippy2CSS = commonUtils.getAssetURL(tippy2CSSPath);
+
+ if (this._('#info-tooltip-icon')) {
+ this.tippy = tippy(this._('#info-tooltip-icon'), { content: this.textContent });
+ }
+
+ return html`
+ <link rel="stylesheet" href="${tippy2CSS}">
+ <div class="info-icon">
+ <!-- https://icons.getbootstrap.com/icons/info-circle/ -->
+ <svg id="info-tooltip-icon"
+ xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+ <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+ <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+ </svg>
+ </div>
+
+ `;
+ }
+
+}
diff --git a/packages/tooltip/src/tooltip.js b/packages/tooltip/src/tooltip.js
index 679556e7..851d58d0 100644
--- a/packages/tooltip/src/tooltip.js
+++ b/packages/tooltip/src/tooltip.js
@@ -13,6 +13,7 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
super();
this.tippy = '';
this.textContent = '';
+ this.iconName = '';
}
static get scopedElements() {
@@ -26,6 +27,7 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
...super.properties,
tippy: { type: Object, attribute: false },
textContent: { type: String, attribute: 'text-content' },
+ iconName: { type: String, attribute: 'icon-name' },
};
}
@@ -44,10 +46,10 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getGeneralCSS(false)}
${commonStyles.getButtonCSS()}
- .info-icon {
- /* color: red; TODO: css-var ? */
+ .tooltip-icon {
display: inline;
- opacity: 0.7;
+ /* color: TODO CSS var */
+ /* opacity: 0.7; TODO CSS var */
}
`;
@@ -63,13 +65,9 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
return html`
<link rel="stylesheet" href="${tippy2CSS}">
- <div class="info-icon">
+ <div class="tooltip-icon">
<!-- https://icons.getbootstrap.com/icons/info-circle/ -->
- <svg id="tooltip-icon"
- xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
- <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
- <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
- </svg>
+ <dbp-icon name="${this.iconName}" id="tooltip-icon"></dbp-icon>
</div>
`;
--
GitLab