From 1244cc6527dc5bc53743b86c77ef73e3862a4ff8 Mon Sep 17 00:00:00 2001
From: Eugen Neuber <eugen.neuber@tugraz.at>
Date: Mon, 13 Sep 2021 12:31:56 +0200
Subject: [PATCH] Add tooltip button
---
packages/tooltip/README.md | 3 +
packages/tooltip/src/button-tooltip.js | 98 ++++++++++++++++++++++
packages/tooltip/src/dbp-button-tooltip.js | 4 +
packages/tooltip/src/dbp-tooltip-demo.js | 23 ++++-
packages/tooltip/src/info-tooltip.js | 2 +
5 files changed, 128 insertions(+), 2 deletions(-)
create mode 100644 packages/tooltip/src/button-tooltip.js
create mode 100644 packages/tooltip/src/dbp-button-tooltip.js
diff --git a/packages/tooltip/README.md b/packages/tooltip/README.md
index 276b55c5..57571fec 100644
--- a/packages/tooltip/README.md
+++ b/packages/tooltip/README.md
@@ -32,3 +32,6 @@ Or directly via CDN:
- `text-content`: Text to show as tooltip (default is 'text missing.' as a reminder!)
- `icon-name`: (`<dbp-tooltip>` only, default is a skull) Name of the bundled icon (SVG) for `<dbp-icon>`
+- `button-text`: (`<dbp-button-tooltip>` only, default is 'submit') Text on the button
+- `type`: (`<dbp-button-tooltip>` only, default is 'submit') Options are 'submit', 'reset', or any string
+- `form-id`: (`<dbp-button-tooltip>` only) Id of the from to submit, if omitted the next form in DOM hirachy will be used.
\ No newline at end of file
diff --git a/packages/tooltip/src/button-tooltip.js b/packages/tooltip/src/button-tooltip.js
new file mode 100644
index 00000000..c3fcaeef
--- /dev/null
+++ b/packages/tooltip/src/button-tooltip.js
@@ -0,0 +1,98 @@
+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 ButtonTooltip extends ScopedElementsMixin(DBPLitElement) {
+
+ constructor() {
+ super();
+ this.tippy = '';
+ this.textContent = 'missing text.';
+ this.buttonText = 'submit';
+ this.addEventListener('click', this._handleClick);
+ this.type = 'submit';
+ this.formId = '';
+ }
+
+ 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 },
+ formId: { type: String, attribute: 'form-id' },
+ };
+ }
+
+ firstUpdated() {
+
+ tippy(this._('#info-tooltip-icon'), {
+ content: this.textContent,
+ appendTo: this.shadowRoot,
+ });
+ }
+
+ _handleClick(event) {
+ const form = this.formId ? document.getElementById(this.formId) : this.closest('form');
+
+ if (form) {
+ switch (this.type) {
+ case 'reset':
+ form.reset();
+ break;
+ case 'submit':
+ form.requestSubmit();
+ break;
+ default:
+ }
+ }
+ }
+
+ static get styles() {
+ // language=css
+ return css`
+ ${commonStyles.getThemeCSS()}
+ ${commonStyles.getGeneralCSS(false)}
+ ${commonStyles.getButtonCSS()}
+
+ .info-icon {
+ display: inline;
+ opacity: 0.7;
+ top: 2px;
+ position: relative;
+ }
+
+ `;
+ }
+
+ render() {
+
+ const tippy2CSS = commonUtils.getAssetURL(tippy2CSSPath);
+
+ if (this._('#info-tooltip-button')) {
+ this.tippy = tippy(this._('#info-tooltip-button'), { content: this.textContent });
+ }
+
+ return html`
+ <link rel="stylesheet" href="${tippy2CSS}">
+ <button id="info-tooltip-button">
+ <div class="info-icon">
+ <!-- https://icons.getbootstrap.com/icons/info-circle/ -->
+ <svg
+ 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>
+ ${this.buttonText}
+ </button>
+
+ `;
+ }
+
+}
diff --git a/packages/tooltip/src/dbp-button-tooltip.js b/packages/tooltip/src/dbp-button-tooltip.js
new file mode 100644
index 00000000..96a7458c
--- /dev/null
+++ b/packages/tooltip/src/dbp-button-tooltip.js
@@ -0,0 +1,4 @@
+import * as commonUtils from '@dbp-toolkit/common/utils';
+import {ButtonTooltip} from './button-tooltip';
+
+commonUtils.defineCustomElement('dbp-button-tooltip', ButtonTooltip);
diff --git a/packages/tooltip/src/dbp-tooltip-demo.js b/packages/tooltip/src/dbp-tooltip-demo.js
index 00d67627..95dd898a 100644
--- a/packages/tooltip/src/dbp-tooltip-demo.js
+++ b/packages/tooltip/src/dbp-tooltip-demo.js
@@ -5,6 +5,7 @@ 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 {ButtonTooltip} from './button-tooltip';
import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
@@ -20,6 +21,7 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
return {
'dbp-tooltip': TooltipElement,
'dbp-info-tooltip': InfoTooltip,
+ 'dbp-button-tooltip': ButtonTooltip,
};
}
@@ -60,18 +62,35 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
<h1 class="title">Tooltip-Demo</h1>
</div>
<div class="container">
+ <h2>Standard Info Tooltip</h2>
<p>Mind the gap!
<dbp-info-tooltip text-content="tippy info tooltip demo text" interactive></dbp-info-tooltip>
</p>
-
+ </div>
+ <div class="container">
+ <h2>Custom Tooltip</h2>
+ <p>Choose an icon from those bundled with your app.</p>
<p>Mind the gap!
<dbp-tooltip text-content="tippy tooltip demo text" icon-name="information"></dbp-tooltip>
</p>
-
+ </div>
+ <div class="container">
+ <h2>Incorrectly Configured Tooltip</h2>
<p>Missing text, default icon:
<dbp-tooltip></dbp-tooltip>
</p>
</div>
+ <div class="container">
+ <h2>Button with Tooltip</h2>
+ <p>Add a tooltip info to your submit/reset button.</p>
+ <form action="/">
+ <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>
+ </form>
+ </div>
</section>
`;
}
diff --git a/packages/tooltip/src/info-tooltip.js b/packages/tooltip/src/info-tooltip.js
index a9eae509..62e4dbae 100644
--- a/packages/tooltip/src/info-tooltip.js
+++ b/packages/tooltip/src/info-tooltip.js
@@ -45,6 +45,8 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
.info-icon {
display: inline;
opacity: 0.7;
+ top: 2px;
+ position: relative;
}
`;
--
GitLab