Skip to content
Snippets Groups Projects
Commit 4f8fa97a authored by Tögl, Christina's avatar Tögl, Christina
Browse files

Change tooltip to info-tooltip and create a new tooltip variant with custom icon

parent d44b6f3c
Branches
No related tags found
No related merge requests found
Pipeline #55340 failed
import * as commonUtils from '@dbp-toolkit/common/utils';
import {InfoTooltip} from './info-tooltip';
commonUtils.defineCustomElement('dbp-info-tooltip', InfoTooltip);
...@@ -4,6 +4,7 @@ import {ScopedElementsMixin} from '@open-wc/scoped-elements'; ...@@ -4,6 +4,7 @@ import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import * as commonUtils from '@dbp-toolkit/common/utils'; import * as commonUtils from '@dbp-toolkit/common/utils';
import * as commonStyles from '@dbp-toolkit/common/styles'; import * as commonStyles from '@dbp-toolkit/common/styles';
import {TooltipElement} from './tooltip'; import {TooltipElement} from './tooltip';
import {InfoTooltip} from './info-tooltip';
import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element"; import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
...@@ -18,6 +19,7 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) { ...@@ -18,6 +19,7 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
static get scopedElements() { static get scopedElements() {
return { return {
'dbp-tooltip': TooltipElement, 'dbp-tooltip': TooltipElement,
'dbp-info-tooltip': InfoTooltip,
}; };
} }
...@@ -59,7 +61,11 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) { ...@@ -59,7 +61,11 @@ export class TooltipDemo extends ScopedElementsMixin(DBPLitElement) {
</div> </div>
<div class="container"> <div class="container">
<p>Mind the gap! <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> </p>
</div> </div>
</section> </section>
......
import {InfoTooltip} from './info-tooltip.js';
import {TooltipElement} from './tooltip.js'; import {TooltipElement} from './tooltip.js';
export {TooltipElement}; export {InfoTooltip as InfoTooltip};
\ No newline at end of file export {TooltipElement as TooltipElement};
\ No newline at end of file
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>
`;
}
}
...@@ -13,6 +13,7 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) { ...@@ -13,6 +13,7 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
super(); super();
this.tippy = ''; this.tippy = '';
this.textContent = ''; this.textContent = '';
this.iconName = '';
} }
static get scopedElements() { static get scopedElements() {
...@@ -26,6 +27,7 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) { ...@@ -26,6 +27,7 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
...super.properties, ...super.properties,
tippy: { type: Object, attribute: false }, tippy: { type: Object, attribute: false },
textContent: { type: String, attribute: 'text-content' }, textContent: { type: String, attribute: 'text-content' },
iconName: { type: String, attribute: 'icon-name' },
}; };
} }
...@@ -44,10 +46,10 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) { ...@@ -44,10 +46,10 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
${commonStyles.getGeneralCSS(false)} ${commonStyles.getGeneralCSS(false)}
${commonStyles.getButtonCSS()} ${commonStyles.getButtonCSS()}
.info-icon { .tooltip-icon {
/* color: red; TODO: css-var ? */
display: inline; 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) { ...@@ -63,13 +65,9 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
return html` return html`
<link rel="stylesheet" href="${tippy2CSS}"> <link rel="stylesheet" href="${tippy2CSS}">
<div class="info-icon"> <div class="tooltip-icon">
<!-- https://icons.getbootstrap.com/icons/info-circle/ --> <!-- https://icons.getbootstrap.com/icons/info-circle/ -->
<svg id="tooltip-icon" <dbp-icon name="${this.iconName}" id="tooltip-icon"></dbp-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> </div>
`; `;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment