From 7b85286c00f6b0b93c07d8650446b713992f2713 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christina=20T=C3=B6gl?= <toegl@tugraz.at>
Date: Mon, 13 Sep 2021 10:53:56 +0200
Subject: [PATCH] Add possibility for interactive, clickable HTML content to
info tooltip
---
packages/tooltip/src/dbp-tooltip-demo.js | 2 +-
packages/tooltip/src/info-tooltip.js | 5 +++++
2 files changed, 6 insertions(+), 1 deletion(-)
diff --git a/packages/tooltip/src/dbp-tooltip-demo.js b/packages/tooltip/src/dbp-tooltip-demo.js
index 3920d992..00d67627 100644
--- a/packages/tooltip/src/dbp-tooltip-demo.js
+++ b/packages/tooltip/src/dbp-tooltip-demo.js
@@ -61,7 +61,7 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
</div>
<div class="container">
<p>Mind the gap!
- <dbp-info-tooltip text-content="tippy info tooltip demo text"></dbp-info-tooltip>
+ <dbp-info-tooltip text-content="tippy info tooltip demo text" interactive></dbp-info-tooltip>
</p>
<p>Mind the gap!
diff --git a/packages/tooltip/src/info-tooltip.js b/packages/tooltip/src/info-tooltip.js
index bc0a00ca..a9eae509 100644
--- a/packages/tooltip/src/info-tooltip.js
+++ b/packages/tooltip/src/info-tooltip.js
@@ -12,6 +12,7 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
super();
this.tippy = '';
this.textContent = 'missing text.';
+ this.interactive = false;
}
static get properties() {
@@ -19,6 +20,7 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
...super.properties,
tippy: { type: Object, attribute: false },
textContent: { type: String, attribute: 'text-content' },
+ interactive: { type: Boolean, attribute: true },
};
}
@@ -27,6 +29,9 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
tippy(this._('#info-tooltip-icon'), {
content: this.textContent,
appendTo: this.shadowRoot,
+ interactive: this.interactive,
+ allowHTML: this.interactive ? true : false,
+ hideOnClick: this.interactive ? false : true,
});
}
--
GitLab