diff --git a/packages/tooltip/src/dbp-tooltip-demo.js b/packages/tooltip/src/dbp-tooltip-demo.js index 3920d992af5bfea3e4a0d5c39e0032e285222c29..00d67627e9635eacd54f7fcf92627a13cb01f06d 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 bc0a00ca494c0cc1c3a7e4738d11f01ed757b280..a9eae5093358e0c50fa9a881f239ea9064848739 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, }); }